The biggest advantage of CSS is that you can make rules that are apllied to all your content. For fonts this means a few CSS rules can mostly determine how fonts appear on your entire site. There will always be some odd cases that might require special attention but the aim of this article is to use the free version of the Generatepress theme and find selectors that will work for large parts of your website.
In order to try this yourself I recommend making a new page, add a title and make 3-4 headings of various size and a paragraph or two and then publish or preview it. Your new page should now look something like this plus a page title on top:
This is a H2
This is a H3
and this is a H4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Adding external fonts in WordPress
In an earlier CSS class we went through the process of adding a font from google fonts to our html / CSS projects. This section will show you how to do the same with WordPress and CSS.
The main difference is that in WordPress you do not have direct access to the head section of your website through the control panel. There is still a head section, every web page has one, but this one is generated by the WordPress CMS. If you want you can look at the head section through developer tools. Right click on you blog, choose inspect to open developer tools and then click the elements tab. You should see the head element with a triangle to the right allowing you to look inside the element. If you do this you will see that this head element is much more complex than anything we did with our html projects. Anyway, lets get to the point.
In order to link to a font in the head section of a WordPress site you need the plugin ‘Insert headers and footers’. On your dasboard go to:
Plugins > Add new
or in norwegian…
Utvidelser > Legg til ny
After the plugin is installed you also need to click ‘Activate‘. Time to find a font you like, follow the link to google fonts:
Remember you just need to click the plus sign on the fonts you want. Too many fonts can get messy and slow down your site, but adding 2-4 fonts should be fine. While we ar e at this stage it is also worth checking out these links for parining fonts.
https://inkbotdesign.com/google-font-combinations-mixing-typefaces/
https://www.reliablepsd.com/ultimate-google-font-pairings/
https://www.figma.com/google-fonts/
…or just type ‘google font pairs’ into google and find something else.
When you have picked your fonts you will see a black bar at the bottom of the google fonts site. Click the black bar and a pop up window with two code snippets will appear. you have to copy the top of these two snippets and paste it into your head section. That means we have to use the plugin that we just installed. Hover over the ‘Settings’ option on your dashboard and then choose ‘Insert headers and footers’. There are three text fields you can put scripts into, you want ot use the on for header. Paste the google fonts code in there.
Styling the elements
You can now go to the preview of the published page with the headings and the dummy paragraph that you made earlier, or make it. Here are the selectors and some CSS for these elements. The important part is the selector so it works, then you can decide how you want to style it with CSS. This first collection is the most important. It should adjust all fonts on your entire page. You do not want to set rules such as font-size of color with this selector as it will affect too many elements. This is where you should put your standard font to be used in paragraphs and elsewhere. Special fonts for headings etc. we will deal with later. Try the following CSS but with a font of your choice from google fonts or another resource.
body, button, input, select, textarea {
font-family: "Roboto Slab", sans-serif;
}The CSS code above should target most elements on your site. You can see there is a combination of selectors. If you see an element that has the wrong font you should fish out the selector in developer tools and add it to the list of selectors in the CSS above.
The next piece of code targets the main title in your header. Maybe you want the site title to have a special font? Use the main-title class as below to adjust the title font.
/*FONTS CSS
Make sure fonts are imported through insert headers and footer plugin*/
.main-title {
font-family: 'Raleway', sans-serif;
font-size: 4em;
}The code below targets the entry title. The entry title is the title on top of each post or paragraph. You can of course add rules for color, text-shadow, border or whatever you want.
.entry-title {
font-family: 'Raleway', sans-serif;
font-size: 3em;
}