Resources

Add Google fonts

Overview

The default type styling in PageLines Framework may not meet your design requirements and therefore, you may want to use custom fonts such as Google fonts.

In PageLines Framework, this process is straightforward and takes only a few moments to have your desired font applied throughout your site.

Settings

The Typography settings that appear when PageLines Framework is installed and active. Allow you to quickly add custom fonts to your site and apply them to three types styles:

  • Primary (body, links, lists and etc...).
  • Major Header (h1 and h1).
  • Minor Header (h3, h4, h5 and h6).

Configuration

To add Google Fonts to your site, first locate the font you wish to use. In this example, we will be applying the Oswald font to all three type styles.

Step 1

First, we need to select the styles and character set, these are steps 1 & 2 on the Oswald quick-start page.

Google Fonts Step 1&2

Step 2

Once, we have selected the styles and character set, jump to step 3 on the quick-start page. Copy the code provided by Google Fonts (in this example we use the Standard code option.

Google Fonts Code


<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

Simply paste the stylesheet code into the External Font Scripts located in the Typography settings

Google Fonts Paste Code

Step 3

Once the code has been added to the External Font Scripts editor. Copy the font-family CSS on step 4 of the fonts quick-start page.

Google Fonts CSS


font-family: 'Oswald', sans-serif;

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your type styles options.

Google Fonts CSS Type Settings

You can also include font-weight, if the font supports it or you added that style in Step 1. You can see an example in the image above, where we have added font-weight: 700; to both Major/Minor Header Styles.

Adding Multiple Fonts

The ability to include multiple fonts is also supported. If you wish to use multiple fonts for example, one font for your Primary and another for your Major & Minor Headers.

Simply follow the steps above and add the font stylesheets to the External Font Scripts editor as shown in Step 2.

In the example below, we have added both Oswald and Roboto.

Google Fonts Multiple Fonts

Roboto has been used for the Primary Type Style and Oswald has been used for both Major/Minor Header Style.

Google Fonts Multiple Fonts CSS

Third-party Themes

If you're using a third-party theme, you will not be able to use these instructions to add custom fonts. These instructions are only available when PageLines Framework is installed and the active theme.

If you wish to use a third party theme and include custom fonts, please visit your theme providers site for instuctions.