Fonts In WordPress: Styles, Types, CSS Modifying

Fonts collection

The main reason you read this article is a wish to make a design of your site more interesting and attractive. Texts are the most important content on the majority of the sites, text design takes an attention even if your site is a photoblog, for example. Let’s talk about what font style is, how you can modify it using CSS, and where you can find the one you like.

Font style and combinations

Font type

As you probably know, there are a few font styles: Serif Style, Sans Serif Style, Script Style and Decorative. Last two hardly used in a text, but very good for titles.

Serif style mainly uses in the main text, for better reading. We perceive such text as comfortable and stable, so to show stability and credibility it may be used for headers too. Actually, you can combine fonts as you want, but to be sure your site page looks great, use such generally accepted rule: reconcile Sans Serif in main text with Serif font in a title and vice versa. One wonderful site FontPair will help you to find a pair for the font you liked and show you numerous fonts in the dozen combinations.

How to get a font

What_Font

But one day you may see the font you’d like to use, on some site and you don’t know what to do. To recognize that, try excellent extension for Chrome Browser, WhatFont. You only click on the extension icon in your browser and get full information about any font provided by Google and Typekit.

Talking about sources for font hunt, you may get the font by these ways:

  • Online services such like Google fonts, Adobe Typekit, Font Storage, FontSpace or the Font Squirell
  • For people who want to make typography on their site totally unique, and can spend some time for it, there’re a lot of services to make new original font personally. Where are just some of them:
    • Fontlab Studio – one of the most popular font design adds, for Windows and MAC
    • Font Forge – application for MAC, Windows and Linux, its interface translated into many languages
    • Type 3.2 – free and easy-to-use editor, have many features
    • Glyphr – free, but quite powerful font editor, excellent for beginners
    • iFont Maker – let you create a new font even from a sketch, for Windows 8 and iPad

    It will be better to show this font to an experienced designer or your friends at least: not everything seemed to be great is.

Font types

Font type modifying

And you can also change a font type: normal, italic, “deleted” text, underline, bold and invert text. For simple text decoration you can use this code:

N.B. Normal is used in the case you don’t want to emphasize any text, don’t use any other style for it. But for some underlined piece of text, for example, use this code to make it normal:

Normal text.
.my_text{
text-decoration: none;
}

This is Italic text.

This is Italic text.

This is Bold text.

This is Bold text.

This is Deleted text.

This is Deleted text.

This is Underlined text.

<style>
  .underline{
  text-decoration: underline;
  }
</style>
  

This is Underlined text.

This is Invert text.

<style>
  .invert{
  background-color: #000000;
  color: #ffffff;
  }
</style>
  

This is Invert text.

The outcome

Be careful of using too many fonts, to avoid your site slowing down. And you hardly combine more than 3 fonts that looks great. So, use online services mentioned in the article to succeed in this. In the next article, I will show you how to hook up any font on your WordPress site. Have you got any experience about that?

 

Leave a Reply