My favorite fonts (and how I use them)
 Saira |
 Work Sans |
 Roboto |
 Exo 2 |
I also have 'Work Sans', 'Exo 2' and 'Roboto' on my list of favorites. I do not use 'Roboto' by itself however, I use it in conjunction with 'Work Sans', where I make the titles 'Work Sans' and use 'Roboto' for the paragraph font, or what is also known as the body font since (being a slightly condensed font) it has excellent legibility, whereas 'Work Sans' which is a slightly extended font lacks that. When it comes to 'Barlow' and 'Saira' however, with these I use the font for everything from titles to body fonts. These are slightly condensed fonts that also have a rectangular shape to their glyphs. And this condensation and the rectangularity give them a very good hold on the baseline and the lowercase x-height, both of which are crucial for body text fonts. 'Exo 2' I only use for titles, then also in combination with 'Roboto' for body text. But 'Exo 2' and 'Saira' also make a very good combination, so sometimes I do that as well: 'Exo 2' for titles, 'Saira' for body texts.
Now, let us talk about how we bring these fonts into the template. The magic is this code below, which you paste under the <head> part of your theme, before <b:skin>:
Unfortunately, listing the fonts with the googleapis links right at the start will not prevent you from having to go through the existent template and hand correct all the fonts that are already there. What one does for this major cleanup is a Ctrl+F inside the HTML editor and then copy paste the name of the font that you want to change, which in my case, more often than not, will be 'Open Sans', a font that I have some serious issues with. Press 'enter' and the search will take you to the first culprit. Now change that to your own font (let us say 'Roboto'), then re-paste the already copied 'Open Sans' and go to the next one. And yes, there may be quite a few lying around, which is why I am advising that one pastes rather than types anew every time.
(And why, you may ask, do I have issues with 'Open Sans' which is so commonly used? It lacks the fine curvature that sans serif fonts similar to it like 'Roboto' or 'Work Sans' have. And, even more importantly, it does not have a very good baseline because the lowercase letters are too rounded.)
Now, let us talk about how we bring these fonts into the template. The magic is this code below, which you paste under the <head> part of your theme, before <b:skin>:
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Barlow:100,200,300,400,400i,500,600,600i,700,700i|Poppins:400,600,700' media='all' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Barlow Semi Condensed:100,200,300,400,400i,500,600,600i,700,700i|' media='all' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Roboto:100,200,300,400,400i,500,600,600i,700,700i|' media='all' rel='stylesheet' type='text/css'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
As you can see I am also listing all the weights, starting from 100 all the way to 700, even if I do not intend to use all of them. This is just good design practice, you never know when you may need to tweak a weight, so it is good to have them from the get go.
(And why, you may ask, do I have issues with 'Open Sans' which is so commonly used? It lacks the fine curvature that sans serif fonts similar to it like 'Roboto' or 'Work Sans' have. And, even more importantly, it does not have a very good baseline because the lowercase letters are too rounded.)
And now onto the text styling elements. Here's the basic list of things that you will most likely need to look at. Not everything obviously, but some of these things will need to get tweaked. I am using a post title snippet as an example, but this could be other typographic elements, of course:
.item .post-title {
font-family: 'XXXXX';
font-size: XXpx;
font-weight: XXX;
letter-spacing: X.XXem;
line-height: X.XXem;
text-transform: uppercase;
}
I always put the font-family at the very top since it is just a good habit to do so (you should always put the font-family inside single quotation marks, but all the other stuff like sans serif Arial Verdana etc - those you can leave out, they are remnants from before the times of googleapis). And when it comes to titles, I almost always make them uppercase, so I put that in the end there as well.
There are of course other things that you will also be looking at, such as for example, margins and paddings, especially when it comes to titles or tags, in order to align everything perfectly. But that said, the basics are these. This is what I do.
