Manage fonts

March 2, 2014| Sushil Adhikari

Managing fonts and providing a large selection of fonts within a theme is actually very difficult because of how many are used throughout the theme. You have font families, font sizes, line-heights, and even the issue of who is viewing your website because fonts for Windows and MAC’s are very different and some fonts that might be available on one, may not be available for the other.

The best way to manage fonts, more so if you want to choose different fonts is to use a font plugin, something like WP Google Fonts, or any other font plugin that grabs your attention. When using a plugin, it means you can use it on other themes, should you decide to change themes down the road. It also lets you target select elements in your web pages such as headings or other elements that have classes, to change the font for that item only…things like the font, size, bold, and any other font style attribute. 

The other method would be to use a child theme which is what many will do because you can override the parent theme’s own stylesheet with the child theme one. This also protects your changes whenever you update the theme (parent theme). Likewise, you can also use a CSS editing plugin as well. 

However, the one reason why you would use a font plugin is to have the choice of 100’s if not 1000’s of fonts.

Circumference Lite Font Management

Controlling fonts in Circumference Lite is kept to a couple of settings, but does not include a feature of choosing a font (use a font plugin). However, you can still manage font sizes from one of two settings found in the theme’s customizer under the tab “Typography“.

To change the font size for the whole site globally, including the top header area, menu, etc., do this:

  1. Go to Appearance >> Customize >> Typography
  2. Look for the “Body Base Text Size” setting
  3. Change the default 100 (this is a percent size) to what you want. For example, entering in 120 means 120%
    global-font
  4. Click Save and Publish

To change just the content area font sizing:

  1. Go to Appearance >> Customize >> Typography
  2. Look for the “Main Content Area Text Size” setting
  3. Change the default size 0.813em (13px) to what you want (see below for information)
    content-font
  4. Click Save and Publish

Using EM’s for Font Sizes

Using em’s for font sizes is actually the correct method to allow for relative sizing to the main body base size. In the past, most were used to px (pixel) sizes, but the problem with this is that pixels are a fixed size, meaning they will not change. To help you convert px to em’s, a website called PX to EM is one you may want to bookmark:

PX to EM

Generally the base font size for a website will be 100% which also means 16px, and then in em’s, this equals 1em. So if you look at the default font size for the content area of this theme as 0.813em, this will equal 13px if the base font size is 100%, 16px, or 1em. Most of the time, your theme will be set as 100%.

 

Categories: Setup Tutorials for Circumference Lite

Leave a Reply