The Google Fonts Interface

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.

Awesome.

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:

STEP 1

In Google Fonts website, click on the Quick Use button near the font you want to use, like this:

STEP 2

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:

STEP 3

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.