Adding new Google Fonts to Dynamik Website Builder

Adding google fonts to dynamik website builder and genesis

** 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.

Let me show you how to get these fonts into your Dynamik Website Builder + Genesis website.


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:

Using Google Fonts in Dynamik Website Builder

  1. Search – If you knew the name of the Google Font you wanted use (like Open Sans), type it in this box.
  2. 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.
  3. 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
  4. Fonts – Based on how you searched/filtered here are the available fonts.
  5. 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:

Filtering Google Fonts

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:

Changing thickness in GOogle Fonts

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:

Google Fonts make me happy

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:

Quick use google font

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:

GOogle font css header code

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.

FInding google font type

STEP 4

Login to your website and navigate to Genesis > Dynamik Design > Body > Google Font Control and click the Google Fonts button, like this:

Using Google Fonts in Dynamik Website Builder

STEP 5

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:

google-font-dwb

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:

STEP 5

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!

Using Your New Google Font In DWB

Now you’re done and you are that much awesomer.

Have fun, add Google Fonts and make something amazing.