** This is part 1 in a series on using Google Fonts when designing a website (if you missed part 2, learn how to add Google Fonts to Photoshop) **
At some point Arial and Verdana become boring fonts. Really boring.
But in a world made up of different operating systems with different fonts installed, different browsers, different devices… what options do you have for fancy fonts?
Google Fonts. Yes!
Google Fonts are fonts that reside in the cloud so the web visitor does not need to have the font installed on their computer to see them.
Yes it’s awesome, free and client love them as it makes a website “pop” a little.
The Google Fonts Interface
Start by clicking here to visit Google Fonts
On first glance, the Google Fonts interface can be daunting. There is a lot going on in this screen, but there are five main sections you should know:
- Search – If you knew the name of the Google Font you wanted use (like Open Sans), type it in this box.
- Filters – If you are not sure of the name, but know they style of font (like a thin Handwriting font), juse use the controls in this section to narrow down the results.
- Preview – Sometimes it helps to know what the font will look like when you get it into your website. Use this section specify the text (a word, a sentence, a paragraph, etc…) and it will display your text using Google Fonts
- Fonts – Based on how you searched/filtered here are the available fonts.
- Quick Use – That little button with the right arrow is the button you click on to use a Google Font (more on that in a bit)
So now that you know the interface, let’s walk through finding a Google Font.
Finding Your Perfect Google Font
As of this writing there are 651 fonts in the directory. Six hundred and fifty one! With so many video games to play, that’s wwwwaaaaaayyyyyy tooo many fonts to review at once.
So we need to narrow that down.
Let’s say that you are looking for a kinda thick, blocky font to use for headings (or a logo).
In the Filters section, let’s turn OFF everything but Sans Serif (that means font’s that don’t have little squiggles on the end), so the filter would look like this:
and click OK.
That got it down to 165 fonts. Not bad, but that’s still too many.
Now let’s open up thickness and move the slider to the right a bit, like this:
Stopping the slider at almost all the way to the right, leaves us with 7 fonts.
So scrolling up and down those seven fonts, I think Alegreya Sans SC is the way to go!
This is what it looks like:
Once you’ve found that perfect font, you might be feeling a bit like this:
But we are not done yet! Now comes the fun part…
Adding A Google Font To Dynamik Website Builder
Once you’ve chosen the best Google Font for the website you are building, now it’s time to get it into Dynamik Website Builder. Just follow these steps:
In Google Fonts website, click on the Quick Use button near the font you want to use, like this:
Scroll down until you see the section titled “3. Add this code to your website” and COPY the entire line in the grey box, like this:
Scroll down a little bit more until you see the section titled “4. integrate the fonts into your CSS” and take a look at the style of the font (just remember this, you’ll need it in just a second). In this instance, the font is a “sans-serif” font.
Login to your website and navigate to Genesis > Dynamik Design > Body > Google Font Control and click the Google Fonts button, like this:
In the “Link code goes here…” box, PASTE in the line of code you copied from the Google Fonts website and choose the right font type, in my example I would do this:
REMEMBER: your font might be a different type!
As soon as you click that button, there should be a new entry in the box that looks like this:
Click the big blue SAVE CHANGES button
NOTE: If you are not using Dynamik Website Builder (you should be), here are the official (and complex) Google Font installation instructions.
You can add as many Google Fonts as you’d like, just repeat the process for each one
Using Your New Google Font In DWB
Now that you’ve added it, now we need to select it. Go to any section in Dynamik Website Builder that gives you a font selector and you’ll see your new font there.
For example if I wanted to make all the Headings styles that font, I’d go to Content > Content Heading Font and now my new font is listed there!
Now you’re done and you are that much awesomer.
Have fun, add Google Fonts and make something amazing.