Good morning everybody and welcome to this special seminar on customizing Genesis Child Themes with Custom Fonts. This is actually lesson 2 in our Customize Genesis Like a Pro series.
Today we are going to start off by looking some of the basic CSS font styling rules. Once we’re done with that we’ll go on to adding custom web fonts to the child theme and look at different ways to do that including Google Fonts, Adobe Edge Fonts, Typekit and myfonts.com. Then we’ll look at Font Awesome and look at ways of using icons using the Font Awesome font.
We’re just going to dive right into it here and look at what I consider to be the bible of this kind of topic which is w3schools. We’ll look at w3schools, learn CSS and their section on fonts.
3 Types of Fonts for Genesis Child Themes
There are essentially 3 types of fonts that you may be working with in child theme.
There are Serif fonts and you can see that here. The red highlighted areas are what makes it different from the Sans-serif fonts.
There are Sans-serif fonts which are just straight lines, well not necessarily straight lines but nevertheless they don’t have the little serifs on them.
And then there are monospaced fonts. The difference between monospace fonts and the other two fonts is that in monospace fonts each character always takes up exactly the same horizontal space. So in a monospace font, an “o” and an “i” and an “m” are all exactly the same width whereas in your typical Serif and Sans-serif fonts, the “i” font is narrower than the “m” font.
Monospaced fonts come from the days when computer programmers would write out their programs on what kind of look likes graph paper or coding paper where each character went into a separate box. Punch card operators would then be able to read them more clearly and understand them more clearly. That’s really the origin of that monospace font.
We’re probably only going to use monospaced fonts in conditions where you may be displaying code on your site and otherwise you’ll just use either Serif or Sans-serif fonts.
Web Safe Fonts
You’re probably familiar with the concept of web safe fonts. Web safe fonts are fonts that you can reliably expect to exist on the user’s computer or on the user’s mobile device. There are a limited number of those fonts actually. Let’s go to web safe fonts here for a second.
Types of Serif Fonts
In terms of Serif fonts, there’s really only 2 different types. There is Georgia, Times New Roman and Times. Those are often used together in a font family declaration or what we call a font stack because Times New Roman and Times are usually existent on Macintosh and Apple devices and Georgia is usually available on Microsoft devices. Often if you’re looking at it on an Apple you’ll see it in Times and if you’re looking at it on a PC you’ll see it in Georgia.
Types of Sans-serif Fonts
Then we have the Palatino Linotype, Book Antiqua and Palatino. Those are also combinations of fonts that exist either on Microsoft or on Macintosh or Apple devices. Then you have a larger variety of Sans-serif fonts like Arial and Helvetica.
Arial and Helvetica Alert
Arial and Helvetica are very similar to Georgia and Times New Roman. Arial is the PC version and Helvetica is the Macintosh version. Now, there’s a gotcha here for web designers especially in the case of Arial and Helvetica and that is Helvetica is quite a bit wider font. The difference is often noticed in menus where you’re trying to make your menu just the right width.
So when you’re working on a PC and you’re using Arial if you are too close to the gnat’s eyebrow on space, the Helvetica font will make the menu break or one menu item drop to a lower line on a Macintosh. Helvetica is simply a larger font, a wider font which means that less letters can fit on a line. However, generally Arial and Helvetica are usually on the same font stack or the same font declaration.
Then you have Arial Black for Microsoft and Gadget for Apple and Impact for Microsoft and Charcoal for Apple. Then you have others, Tahoma and Geneva and Verdena and Geneva and Trebuchet MS and Helvetica, these are all Sans-serif fonts that, if you wish to use them, you can expect to exist on somebody’s device.
Since not every computer in the world has Arial, we use a system called Font Stacks and in a Font Stack what you do is you declare a series of fonts or font families.
This is an excellent example of an Arial, Helvetica font family font stack where you’d specify Arial. If the computer doesn’t have Arial, it’ll look for Helvetica, if it can’t find Helvetica then it will use Sans-serif.
A similar kind of thing happens here with Georgia, usually of Georgia, Times New Roman, Times and Serif. If it falls back to Serif, it just uses whatever the browser has set aside for its default Serif and its default Sans-serif.
There’s one other default for that and that is Cursive. So in terms of the sort of default fonts, you’ve got Serif, Sans-serif and Cursive. There is an excellent resource called cssfontstack.com that has a whole group of excellent font stacks.
Not all of these font stacks actually are web safe. For example, this Brush Script is not likely to be web safe and neither is Papyrus. Let’s take a look at, for example, Impact. If you look at Impact the font family is Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat so on and so forth.
You can use this as a good resource for where to get a good font stack. For example, Helvetica New, Helvetica Arial and Sans-serif. This is a very useful resource. If for example, you want to use Calibre and you are wondering what else should be used with it in order to create the right font stack, this is the place to check that out.
Next up we’ll be talking about a whole series of CSS font properties.