Font Options Tab

Select EmPress themes include a Google Font editor directly in the theme Customizer, embedded within the Font Options tab. At present, this includes our Barton, Hayes, and Pearl themes. This article will share advice on how to select, customize, and troubleshoot the Font Options tab in the Customizer.

HOW TO CUSTOMIZE YOUR FONTS

  • If you've worked with a designer to establish a brand identity suite for your site and have a list of recommended fonts, skip to step 2 below!
  • If you are customizing from scratch, you'll want to do a little homework first. Unfortunately, with so many Google Fonts, we're not able to load in previews of each font directly into the theme. Instead, here's what we recommend:

1. Head to the Google Fonts website and search for fonts you like there. Make a note of the names of your favorites. 

2. Then, once you have a list of fonts you want to try out (or if you have a ready-made list of fonts from a designer), simply head to  Appearance > Customize > Font Options, select your desired site area tab, then type them in to the Select Font Family dropdown to experiment and play with your selections. In the example below, the user is testing out three different fonts they've scouted:

3. Continue testing out and adding your faves until you land on your favorite combination!

4. Use the available controls to further customize your font selections. In most instances, you can adjust the font size, line height (space between lines of text), as well as letter spacing (space between individual letters). We've also provided text transform properties, so you can apply all-caps, regular capitalization, or lowercase styling to select areas of your site.

NAVIGATING THE GOOGLE FONTS WEB PAGE

If you are new to searching for fonts in Google Fonts, be sure to use the Categories dropdown to filter by serifs/sans serifs/handwriting/display fonts to find what you need! Here is where this menu lives on the Google Fonts home page:

Similarly, you can change the number of styles in the Font Properties filter dropdown to select fonts that have several available styles within their family. Multiple styles usually indicate that a font will at minimum have a regular, italic, and bold style; many styles usually indicate several weights (e.g. light, regular, medium, bold, etc.) as well as styles (italic).

A FEW TIPS:

  • If you see a font you like as you browse, try right clicking on it, then opening it in a new tab. Keep doing this until you have a bunch of tabs with fonts you think you want to try. From there, toggling between tabs may help show you which fonts are too similar, or in some cases, fonts you already know you want to eliminate and don't need to bother with.
  • Try mixing serifs with sans serifs, or display fonts with sans serifs. Accenting select titles on your site with scripts or handwriting fonts is another great way to add a little personality. 
  • If you're using serif fonts, look for ones that feature a true italic style. This can provide additional font styling options. For fonts that do not offer an italic style, if you apply italics to them on your site, they will render in faux-italics, which only sets the font on an angle. 
    • In Google Fonts, you can tell if a font has a true italic style by clicking on the font, and looking at the styles listed. For example, Averia Libre Serif offers light, regular and bold styles, as well as their italic counterparts. Conversely, the font Prata only offers a regular style, and would look slanted if you apply an italic style to it on your live blog. (Note: You may recognize Prata as it's an extremely popular Google Font!) 
    • In some instances, not having a true italic style available may not matter to you, especially if you only plan on using your targeted font in a single area, such as post titles. Prata is often used in all caps for post titles, where user's don't need it to be italicized — hence it's popularity!

Here are some additional articles and resources to check out when selecting fonts for your site:

TROUBLESHOOT: FONTS NOT LOADING IN CUSTOMIZER

While rare, if your Google Fonts will not load in the Customizer, this is likely due to your site being hosted on a developer or staging site, or any other password protected site.

Unfortunately it's not possible at this time to edit the fonts when your site is password protected. This is because the Customizer has to fetch a list of the fonts, and when your site is password protected, the file with the fonts in it requires a password as well, and there's no way around that. We are currently researching other ways to load the fonts, but in the meantime you will need to temporarily remove password protection to change the fonts.