1. Home
  2. Docs
  3. Customizing the Theme
  4. General settings
  5. Fonts settings

Fonts settings

Accessed in Appearance → Customize → General settings → Fonts settings.

Here you can choose fonts for your page. You can set font for 3 main layout elements:

  1. Font for top nav menu, interactive elements, short labels, etc.
  2. Font for Titles/Headings
  3. Font for normal(content) text – text in posts/pages, and other places with a lot of text.
  4. Font for text logo – available since Rife Free/Pro 1.8.3

Using System Fonts

If you choose the System font for some group then remember that this setting depends on fonts installed on a client device. However it is fastest loading option.

Font family rule looks like this: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

By selecting this font you will use system font of device that your site is opened in. It is good for “native” feeling of your website.

More on which font will be used on which device.

Using Google Webfonts

If you choose Google Webfont then remember to choose needed variants and subsets. For the preview, google font is loaded with variants regular and 700, and all available subsets.

You have to select what subset of chars do you need for your language, and also what styles you wish to use.

For example, fonts for titles should always be selected with bold style(600 or 700), unless it is set different. In another case, the browser will try to emulate bold face of font, and it might look strange.

Same with the font for content —  you should choose a font that has bold, italic and maybe italic bold style.

On the other hand, if some variant will not be used in your page you shouldn’t select it, cause it will only make loading of your page slower. Same goes for subsets.

If you will write mainly in English then you should be good with almost any font. If your language has some different chars you should always test your selected font.

Using Typekit webfonts

There is no in theme build in support for Typekit, but it is still simple to use Typekit fonts if you are familiar with Typekit.

Just follow below steps:

  1. Install Typekit plugin —  Get it from here or look for “Typekit Fonts for WordPress” in plugins installation panel in your WordPress.
  2. Activate the plugin and go to Settings → Typekit Fonts
  3. in Typekit Embed Code field add code that you received from Typekit. It will look something like that:
    <script src="https://use.typekit.net/x22owobf.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
  4. in Custom CSS Rules field add CSS for one, or more, below groups.

Example

Let’s say you want to use font “Europa” that you have added to your kit in Typekit. Then replace “font-name” with “europa” in below code examples.

Text content font:

/* Text content font */
    html,input,select,textarea{
        font-family: "font-name", sans-serif;
    }

Top menu font content:

/* Top menu font */
    ul.top-menu,
    #menu-overlay{
        font-family: "font-name", sans-serif;
    }

Titles font:

/* Titles and titles alike font */
    h1,h2,h3,h4,h5,h6,
    h1 a,h2 a,h3 a,h4 a,h5 a, h6 a,
    .page-title,
    .widget .title{
        font-family: "font-name", sans-serif;
    }

Text Logo font:

/* Text content font */
    a.logo{
        font-family: "font-name", sans-serif;
    }

Using Custom Font from font file

There is no in theme build in support to use custom webfont that is provided from the file, but it is pretty easy to do it.

Every time you add custom webfont to any site, you have to do 3 things:

  1. Add font files somewhere on your server
  2. Link this font in CSS.
  3. Use this font on desired elements of the layout.

There are numbers of ways to do it, but I will explain it with use of child theme, as it is the safest way in my opinion, if you want to be safe on theme updates.

 

Process

  1. Install child theme & activate it.
  2. Get your webfont. As for this example, I will use the Lobster font from here.
  3. In child theme create font directory.
  4. Upload there font files, in this example Lobster.eot & Lobster.ttf.Custom webfont in child theme
  5. With each webfont, there is usually style sheet file, in this case, stylesheet.css. We open it and copy its content to child themes style.css.
  6. We have to provide a valid path to font files, so we add font/ before every Lobster.eot & Lobster.ttf. It should look like this:
    /* Top menu font */
        @font-face {
    	font-family: 'Lobster';
    	src: url('font/Lobster.eot');
    	src: url('font/Lobster.eot?#iefix') format('embedded-opentype'),
    				 url('font/Lobster.ttf') format('truetype');
    	font-weight: normal;
    	font-style: normal;
    }
  7. Now we have to tell our theme for which elements we want to use new web font. In our example, we want to use it for the main menu. So in custom CSS, we add following code:
    /* Top menu font */
        ul.top-menu,
        #menu-overlay{
            font-family: Lobster, sans-serif;
        }
  8. Save your changes, and now you should see your font.

Groups of elements

You can use your web font for any elements, however, if you want to replace font for one of theme defined group of elements, then use one of below codes.

Let’s say you want to use font “Lobster”, then replace “font-name” with “Lobster” in below code examples.

Text content font:

/* Text content font */
    html,input,select,textarea{
        font-family: "font-name", sans-serif;
    }

Top menu font content:

/* Top menu font */
    ul.top-menu,
    #menu-overlay{
        font-family: "font-name", sans-serif;
    }

Titles font:

/* Titles and titles alike font */
    h1,h2,h3,h4,h5,h6,
    h1 a,h2 a,h3 a,h4 a,h5 a, h6 a,
    .page-title,
    .widget .title{
        font-family: "font-name", sans-serif;
    }

Text Logo font:

/* Text content font */
    a.logo{
        font-family: "font-name", sans-serif;
    }

Information

It is good practice to not use too many different Web fonts as it slows loads time of your site.

Was this article helpful to you? Yes 3 No 3