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 Fonts1. 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 FONT3. 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 )