I decided to try and add a custom font to WordPress this time. Nothing fancy, something I did with the regular site already using google fonts, but ran into a bit of a snag.
Browsing online through the various ways of adding in the fonts, I found a method that involved simply adding a few lines to the functions.php file and then adding in the appropriate lines in the stylesheet. The font, though it would change, appeared completely wrong. After trying a few different fonts, I realized it just simply wasn’t working correctly.
I’m not sure if the snippet for the .php file I found wasn’t correct, something typed incorrectly, or it simply took a little longer than I would have liked for the change to be implemented. Regardless, I took an alternative route.
I used the Google Typography plugin to add the font I wanted for the title and sub-title of the page. Using it in combination with the SiteOrigin CSS plugin I mentioned in the previous post made it a very quick and painless change.
The first step is to find the CSS element that is needing to be changed. Using SiteOrigin, go to a live preview using the eyeball icon, click on the text section, and note the class name for the element at the bottom. After that, go to the typography plugin.
The typography plugin doesn’t show previews while selecting though, only after. Because of this, it was quicker to find the font desired on the google fonts webpage, then type in the name of the font on the plugin. Set the color and size needed, then add the CSS class found from the SiteOrigin CSS plugin and click save.
The process is definitely easier on a manually created page. On the main page, it was simply a matter of going to Google Fonts and copying/pasting the code that is provided. From there, simply add the CSS that is provided into the CSS class targeting what needs the font.
That said, I’m still not fully sold on WordPress, personally. I do enjoy the blogging ability, but still not happy with the customizing. I prefer more options, and those options seem to only be fully available on a fully hand-built website. I did, however, discover that using SiteOrigin allowed me to add keyframes to the title and sub-title to give a fade-in effect. I thought it might be a nice touch.
-ShenWolf