HOW TO INTEGRATE FONTS INTO WORDPRESS?

As WordPress Developers plugins end up spoiling us, even to the point of forgetting how to do the most basic things any Front End Developer needs to know, like setting up fonts. For the last year or so I’ve been using Easy Google Fonts plugin for all my website font needs. This worked out great until I started my new job and I was required to import fonts sans Easy Google Fonts. What is a WordPress developer to do right? In case you are like me and forgot, here is what you need to know, especially if you are working with Google Fonts and Adobe Photoshop.

Google Fonts

1. Header over to Google Fonts ( https://fonts.google.com ) and search for your favorite font. In my case that would be Roboto. Go ahead and click the plus sign.

2. You will notice a little black tab at the bottom of your browser screen that will probably say, ‘1 Family Selected‘ . Go ahead and click the minus sign and a popup will extend. You should notice two tabs one that says embed the other that says customize. Go ahead and click the customize tab. This is where you will select all the different variations of the font you want.

EMBEDDING THE FONT

3. Now that you have selected all your font variations you are going to want to embed them. You do this by clicking the embed tab and copying the @import as well as the css rules. These are what you will be applying to your theme template/or stylesheet. So once copied make sure they are saved to your clip board or text document.

4. Next we will be installing the font. Head over to your downloads folder and double click the font zip file. Once you do that it will open up a folder with all the font variation you have chosen. Double click the font variation you want to install. ( Make sure you do this for all font variations just so you have them for the future )

INSTALL TO PHOTOSHOP

5. Then click the ‘‘Install Font” button. What this does is install’s the font to your computer so Photoshop has access to it. Now when you pull up your PSD you will be able to pick out the fonts from it because they will have been loaded to Photoshop via your computer.

Enqueue into WordPress or Import into Stylesheet

6. Where I work we develop a lot of landing pages that include their own individual styles so we add the Google Fonts by importing them directly into the stylesheet itself.

So head over to your stylesheet and paste the @import you copied earlier to the top of your stylesheet. ( Its also a good idea to paste the css rules commented out. This way when you use the font in your stylesheet you know the format you should be using. )

If you plan on using only one set of fonts throughout your entire theme it’s a far better idea to register them as a style in your functions.php file.