Managing Fonts in Celestial Lite

December 23, 2013|

This is a big topic but working with fonts in any theme can be a daunting task for many because people will only see certain fonts in a web page that exist in their own computer…or if the fonts are directly embedded into the web site (page) they are viewing.

Celestial Lite (and the Pro version) uses a couple custom fonts but currently these are not embedded, but linked to an external source of Google Fonts. The demo site for Celestial also uses a plugin called WP Google Fonts which can be used for any custom fonts you want to use.

WP Google Fonts

How you manage your fonts will be up to you but please be aware you should have some HTML and CSS skills to make any modifications because depending on what you want to change, whether headings, titles, slider text, or even menus, the theme’s stylesheet is filled with font attributes.

One thing to know about fonts in a stylesheet is that you will often see more than one separated by commas like this:

ubuntu, “trebuchet ms”, arial, helvetica

What this means is that the main font in this example will use Ubuntu, but if that is not available, it moves on to the next which is Trebuchet MS (for anyone on a Windows computer), followed by Arial, and if you are on a MAC, then it will use Helvetica.

What Fonts Does Celestial Use?

This is probably the important piece of information to know is what fonts does Celestial use?

  • Helvetica, Arial, Sans-serif – For the main body content and for form buttons
  • Abel,arial, Helvetica, sans-serif – For the main navigation such as the main menu and submenus
  • Verdana, Helvetica, sans-serif – For all smaller text like breadcrumbs and post meta information
  • Ubuntu, “trebuchet ms”, arial, helvetica – For the headings and drop caps
  • Monaco, Menlo, Consolas, “Courier New”, monospace – For displaying code

From the list above, the two fonts that are custom loaded are: Abel and Ubuntu

Ubuntu is currently coded in the <head> area of the theme’s header.php file because at the time, this was not in the plugin’s font list but Abel is, so using the plugin will be needed. 

Download and Install WP Google Fonts

  1. In your dashboard, go to Plugins >> Add New
  2. Search for WP Google Fonts, by Adrian3, and then click to install then activate
  3. You will set what fonts you want by going to Settings >> Google Fonts
  4. For each font you want, select what you want from the drop down list
    abel-font
  5. You will see a group of settings for 1, 2, and 3 steps, but just leave the other settings empty:
    font-settings
  6. Click “Save All Fonts”
  7. Repeat for each additional font you want to use.

Changing the Main Fonts and Sizes

There’s a lot of font references throughout this theme’s css files but to help you out in knowing where the primary font styles are located, here is a quick reference, but please be aware if any updates to the theme may change the location slightly:

  • Headings – Located in the style.css file around line 172
  • Main Body Text – Located in the style.css file around line 44
  • Main Menu – Located in the theme’s css folder in the menu.css file around line 30
  • Main Menu (submenu) – Located in the theme’s css folder in the menu.css file around line 77
  • Site Call to Action Heading – Located in the style.css file around line 247

Font Sizes (Pixels vs Em vs Rem)

You will notice that in the theme css I use both px and rem for font sizes (and some other things). Pixels (px) is an older method of doing a size but the problem with this is that it’s a fixed size, whereas rem (some sites will use em) is a relative size which actually works out better in the long-run. I won’t go into the technical side of this but here is a quick rundown of what these two are and how and why they are both present.

For standard sizes, I use px, which again is a fixed size. The base text size is 16px which is a default size of browsers. But for the more modern browsers and for relative sizing, I also use rem. So in a nutshell, modern browsers will use the rem, but for the browsers that cannot decipher this value, the px value is there for them.

As I mentioned, 16px is the default browser text size for typical content, but in rem (also em), this will equal 1rem. So here is a little reference for you:

6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt

 

Although this table shows “em” and not “rem”, they are almost the same, enough to use the same values of em for rem. So if you see “em” in the table, simply add the “r” to em for “rem”. Fun hey!

How did I arrive at these values? There is an awesome tool that you may want to bookmark if you want to play with different sizes:

PX to EMwww.pxtoem.com

 

Categories: Setup Tutorials for Celestial Lite

Leave a Reply