Promo 1 - Get our lifetime membership, all themes, and updates forever for only 95 USD.
Promo 2 - Get a free pro theme when you host with us.

An introduction to the typography options

This theme uses basic typography settings and options, but if your website content requires extensive font and typography management, I would recommend checking out the popular font plugins available for WordPress from their Plugins directory (Opens New Window)

NOTE: Typography can be overwhelming and with web design, publishing (especially publishing), it demands a special skills to really delve into this massive area. Typography is related to graphic design, but we can still do some basics of it to give you some options with this theme.

What Can You Do With Fonts

Managing fonts and typography is a massive topic and it’s extremely involved and can often be very complicated for most people. The reason is because there are so many style options relating to typography and fonts…especially when there are literally 1000’s of fonts available. To give you an idea of what kinds of style options fonts and typography includes, let’s look at a list:

  • Font – This is the actual font, or font family such as Arial, Helvetica, Times Roman, etc.
  • Font Size – This is the size of your font (text) in your page content
  • Font Style – This is a style of your font (text) such as italic
  • Font Stretch – This basically means make the font wider or narrower
  • Font Variant – Specifies whether or not a text should be displayed in a small-caps font
  • Font Weight – This is where you choose light, bold, extra bold, etc.
  • Text Decoration – Underline, none, etc. There are other variations of text decoration.
  • Text Color – The colour of your text.
  • Text Shadow – Adding shadow
  • Text Transform – Make all lowercase, uppercase, etc.
  • ….there’s more.

If you want a really good source of learning about fonts and text styling when it involves CSS, the best source is the W3Schools.com website.

FONT PLUGINS – Normally I recommend using font plugins because compared to what themes offer, a plugin will be a LOT better with features and options. You can use the basic typography feature in this theme, but I would recommend checking out popular font plugins for more flexibility.

Google Fonts

  1. Go to Appearance >> Customize >> Typography Settings
  2. Use the text link to visit Google Fonts and select the font you want. This will open a new tab in your browser so you do not lose your tutorial here. Now you can choose a font like Lato for example, by clicking on the ( + ) button in the upper right corner:
  3.  You will need to copy the font URL that shows up in the link box area. This example shows the Lato font link.
  4. Paste this link into the first Google Font field in the “First Google Font URL” field.
  5. Click on “Save & Publish” at the top.

Customizing Your Google Font Selection

If you are not familiar with how Google fonts works when selecting weights, styles, etc., I will give you a quick tutorial below.

When you have selected a font, a black bar (box) will show in the lower right of your browser window which is collapsed until you click on the ( ) icon to open it:

By default, the link showing will just be a single version of the font, but if we want to add a bold version for example, we click on the tab “CUSTOMIZE” to open the window which displays all the variations of this font that you can select the ones you want. For this example, I’m choosing Regular 400, bold 700, and bold 700 Italic:

Now we click on the “EMBED” tab to see the new link we will be copying:

This is the link that gets copied and pasted into your “First Google Font URL” field. If you want to use another Google font, you would look for another font and repeat the steps above.

Get to Your Typography Options

  1. Go to Appearance >> Customize >> Typography Options
  2. From within this panel are other sections
  3. Go through each one and you can make changes to the most common elements in this theme.
  4. When done, click “Save & Publish

Adding Google Fonts

When you follow the tutorial just above, you will go to the “Google Font Settings” to add 1 or 2 additional fonts.

Apply Fonts

Now that you have the Google font(s) of choice loaded, you can now use the font for the body text of your website and/or the headings. All you need to do is type in the font name into the fields for the Body and the Headings fields shown. However, you do not have to fill out both if you just want to change the font to one or the other.

  1. To change the body font to use Lato, just type in Lato

  2. To change the Heading font to use Lato, just type in Lato

NOTE: If you are using a font that contains more than one word in the name, for example, Open Sans Condensed, normally the standard is to use quotes, but you would enter it like this: Open Sans Condensed

Using a Fallback Font(s)

If you ever looked at a theme’s stylesheet, you will discover that font-family will be coded with more than one font. This is done for a reason and works as a fallback option. For example, if you see this:

font-family: Arial, Helvetica, Sans-serif;

That means that if the person who is viewing your website does not have Arial installed in their computer (this is a whole other topic), it will use the next font which is Helvetica, but if that is not available, it then goes on to the next one, in this case, Sans-serif. One scenario is that if someone is on a MAC computer and they don’t have the Arial font installed, the MAC will use Helvtica which is installed on a MAC.

Long story short, when you type in font names in the Body or Heading fields of the customizer, I recommend doing a fallback font. Let’s use Lato as an example for the body setting. I would type in:

Lato, Arial, Helvetica, Sans-serif

If I was using Open Sans Condensed (remember this is more than one word in the font name), I would type in:

Open Sans Condensed, Arial, Helvetica, Sans-serif

Additional Font Styling Options

This theme was recently updated to include a revamp of the typography settings and options to include the ability to add a font for specific elements and sizing. You might discover some minor changes, but here is a tutorial relating to the changes made…

  1. You can now add a font for your Site Title by entering in a font name. Make sure that the font you want to use is either a common font that PC’s and MAC’s have, or if you are using Google Fonts, otherwise your site visitors won’t see the font if it’s not accessible.
  2. You can now add a font for your page and post headings (titles)
  3. You can now add a font for your menu
  4. In addition to the above, you can also set your font sizes.

Font Sizes for this Theme

This theme uses the rem unit for font sizing because it’s a relative size which means for people with vision impairment, they will use a browser feature or screenreader to make text larger.

However, this theme uses Percent for the size unit from the Customizer so that it maintains the theme’s responsive attributes from large to small screens.

To learn more about how to convert pixel to em (including rem) or to percent, you can use this awesome online tool:

PXtoEM.com

The above tool will give you the rem equivelent to the pixel sizes and in percent.

Throughout the Typography Options section in the Customizer, you will find many page elements that have font size settings available to you. For example, the Site Title Font Size you see below has a default size of 300%, but you can change this. You can either type in the new value (don’t add the % symbol) or you can use the up/down arrows that show when your cursor hovers on the field. Once done, click “Save & Publish” at the top.

Other Font Style Attributes

There are a TON of attributes for fonts, so it’s almost impossible to include them all in the customizer here (for any theme) without using an actual Font Plugin. With a plugin, you get all options and usually they load all the Google fonts for you to select from within the plugin. Mostly it’s all mouse clicks.

Use Any Font

Easy Google Fonts

Even when using plugins, you may still need to do some minor CSS, or to find out what the selector tag and/or CSS class name is to apply a style to. For example #site-Title is an ID used for the theme’s site title styling. So to apply something like making it bold, italic, or even a colour, it would be done like:

#site-title {font-weight: 700;}

This will of course be dependent on the theme being used, whether by us or another theme site, the plugin can only go so far as themes are coded different from one another.

But if you want to apply a specific style to something specific in your page content, such as bold, you can submit a Support Ticket or use the Support Forum to find out how this is done. Generally it just requires a small piece of CSS code you would put into the customizer’s Additional CSS setting (a WordPress feature).

Example: For the site description (tagline), you would do this for bold:

#site-description {font-weight: 700;}

Adding a Drop Cap Style to Full Posts

You will notice in the Typography Settings tab of the customizer, a setting for showing the Dropcap on full posts….just like this:

This simply adds an extra style to your full post, so to enable it…

  1. Go to Appearance >> Customize >> Typography Settings
  2. Look for the “Show Full post Dropcap” setting and check the box.
  3. You can also change the colour of your dropcap as well.
  4. Click “Save & Publish

 

In Summary

As you can see, typography is a very time consuming and complex thing. If you have a site that is complex with many different fonts, styles, and other requirements, the theme, a font plugin, and custom CSS coding will be required. Unfortunately there is no one-click magic solution when it comes to fonts and typography that gives you literally tens of 1000’s of variations.