I’m not sure when, but Google completely redid their Google Fonts site and even gave it a new URL. Today I want to review with you the new changes to the site and how to add these Google fonts to your WordPress or Blogger blog :) So now, instead of going to https://www.google.com/fonts you go to the new URL: https://fonts.google.com/
The first thing you’ll notice is that the design of the site has changed. Instead of a list view, they’ve switched to a new grid view. They’ve also done away with the Add to Collection button and added a simple plus button instead. The filter panel remained pretty much the same. It just switched to the right side of the screen.
One feature of the old site I couldn’t find at first is the ability to preview fonts. In the old site it was very clear how to change the text for all the fonts to preview certain text. I was afraid this feature was gone on the new site, but a little looking around and I fount it :)
How to Preview Fonts
I’m honestly not a fan of how this new system works for previewing fonts. I think it was a lot easier to just have a preview text box at the top and a font filter at the top as well. Now in the new site, to change all of the text to match:
- Start by highlighting one of the font’s preview text and deleting it.
- Then type in your new text there.
- After you’ve typed in your new text, click the button under it that says “Apply to All.”
This will change all of the other font’s preview text to match. The same thing works for the font size slider shown below. If you increase the font of one of them, just click the apply to all button to change the rest of the fonts to that size.
How to Select Fonts for your Site
As I mentioned previously, to select a font for your site, you just have to click the plus button. Once you have selected the font, a dark gray rectangle will show up in the bottom right side of the screen.
Make sure that you click the plus button on ALL fonts you want included on your site before expanding that dark gray rectangle at the bottom. Google now combines all of your fonts into one link tag so you don’t need to add one for each font anymore :D
After you’ve selected the fonts you want to use, click on the gray box to expand it. You should see something like below:
Notice above that I selected 2 fonts, Open Sans, and Slabo, however, they’re both included in the one link tag.
Now before you start copy/pasting like crazy, always click over to the Customize tab first. It’s important to select other weights for your font if you plan to use that font for bolding or italicizing your text. So since I plan on using Open Sans for my site’s main body text, I’ll check the regular 400 italic, the bold 700 and the bold 700 italic.
After I’ve finished selecting the font weights and styles I want, I can switch back over to the Embed tab and see that my link tag has updated to include those additional fonts.
NOW it’s time for the copy/pasting ;)
How to Add the Font Code to your Site
So the very first light gray box has my <link> tag in it. This is the code that needs to go into the HEAD section of your HTML. Not sure what that is?
- If you’re on Blogger, go to your Template tab and then click the gray button that says “Edit HTML.” Click inside the code box and press Ctrl + F on your keyboard and search for </head> . Once you find it, paste in your <link> tag right ABOVE that closing head tag.
- If you’re on WordPress, it’s under Appearance > Editor > header.php. However, if you’re using a theme that receives updates, don’t edit that file as it will go away when a new update comes in for that theme. Instead, try a plugin like this one: https://wordpress.org/plugins/header-footer/
After you’ve added in your link tag, the last thing you need to do is assign your font family in the CSS. If you’re not sure where your CSS is, check out this tutorial. Now if you go back to the Google Fonts website and look in that second light gray box, you’ll see the font-family CSS is there for you to copy/paste: (font-family: ‘Open Sans’, sans-serif;). All you have to do is assign that CSS property to your HTML selector. For example, if I wanted to assign that Open Sans font to my body tag, I’d add this css:
font-family: 'Open Sans', sans-serif;
Then you’re done! The font should now show on your website, just remember to SAVE your code before checking ;)
How to Download the Fonts
Downloading fonts to your computer from Google Fonts is in a slightly different place as well. The download button is located inside the dark gray popup box in the top right hand corner, as shown below with a blue square around it:
Clicking that will give you a zip file with font files you can install on your computer and use in Photoshop :)
For me, the new update is a mixed bag. I like that it’s easier to add fonts to your site with how the new plus button works and that the link tag combines all of your fonts into one, but I’m not a big fan of the new layout. What do you think? Do you like the features of the new site or the old site better?