How to upload a font and use it with CSS
Having a font library like google fonts is a lot, but sometimes you just need that one special font. Here is how to upload a font from a file using a plugin. Then you might expect it to appear in the usual font list for your theme, but usually it does not. You will probably need to use CSS to get the font working on your page. Keep reading to see how.
This example will use the font ‘Brewed coffee’ as an example after a student requested that font to use on a page so it could match the same font used on a movie poster.
There are a few plugins that can upload a font from a file. The two that stood out in my search were ‘Custom fonts’ made by Brainstorm force(!), and the other plugin I considered was ‘Use any font’ made by dnesscarkey. I went with the first plugin for no other reason than 100k more installs and it was more recently updated. Both plugins had 4.5 stars when I checked.
The plugin becomes available under Apperance > Cutom fonts
Upload your font and save it in the plugin. There are a few options for getting different versions (bold, italic etc..) of the font so you can have several. You have to give a name to each of these variants you want to use. I just went with one variant. This is how the font looks in the plugin:
Now the font is in the system and should be available in CSS using the font name ‘Brewed Coffee’. At least for the theme I am using (Generatepress) the font is not available in the themes font list even though it is imported on the page. I need to activate it with CSS.
Add a css class to text elements
Using css there are several ways to activate the font on certain elements. You could assign the font to a type such as h1, h2 or h3 but then every h1, h2 or h3 on your entire site will have this font. That is not how we will do it here.
This font will be used on a few special headings and therefore it makes sense to give a css class-name attribute to every heading that will use this font.
It is up to you what you want to name your css class. When naming css classes I try to come up with a name that is descriptive and also a class name that is probably not used elsewhere. You add css classes to blocks on ‘Block settings’ under the ‘advanced’ section:
I named my css class ‘font-brewed-coffee’.
This css class does not exist yet. Let’s make it. In the menu go to Appearance > Customize
Att the bottom of the menu choose ‘Additional CSS’.
Inside the css panel I make my class.
And here is an h1 with the font active: