Using Google Fonts

Using Google Fonts

This guide will show you how to add fonts to your Subeta code or website using Google Fonts.

---

Step 1:
Go to www.google.com/fonts
Play around with the site and explore the different font choices.
You may notice that some fonts have more than one version. These fonts have different styles available. These styles correspond to the different font weights that are available for the font. Font weight is basically how thick the lettering is or degree of boldness.

---

Step 2:
Pick a font you like.
Now below each font there will be two to three grey buttons next to a large blue button. You'll want to click the button that has a right pointing arrow in a box. The arrow pointing down will show you previews of the different styles available. The other button will open a pop-up window with the font and some samples of the font and the available characters/glyphs.

or

---

Step 3:
On this page you will first see the available styles/weights for the font. You can pick one or all of them.

<== or ==>

Scroll down the page a bit and you will come to a box with multiple tabs. Select the middle tab that says @import. A code will pop up.

==>

Take this code and paste it AT THE TOP OF YOUR CSS AND NEVER MOVE IT. IT MUST STAY AT THE TOP.

Below the tabbed box is another snippet of code that shows you the proper font-family value. You may need to remove the quotes for it to work.

---

Example - Single weight/style selected

<style>
@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas);

body {
font-family: 'Mountains of Christmas', cursive;
}

</style>



---

Example - Multiple weight/style selected

If you select a font and choose to select more than one style, you can use the different styles by specifying the font-weight. Below is an example.

<style>
@import url(https://fonts.googleapis.com/css?family=Khand:400,300,500,600,700);

body {
font-family: 'Khand', sans-serif;
font-weight: 700;
}

a:link {
font-family: 'Khand', sans-serif;
font-weight: 400;
}

</style>



---

Example - Multiple fonts selected
Using multiple fonts.

<style>
@import url(https://fonts.googleapis.com/css?family=Khand:400,300,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas);

body {
font-family: 'Khand', sans-serif;
font-weight: 700;
}

a:link {
font-family: 'Mountains of Christmas', cursive;
}

</style>



---

FAQ:

Q: Can I add more than one font?
A: Yes, just make sure the @import codes are all at the top above everything else. See the third example.

Q: It's not working! HELP ME!
A: Check you have everything copied correctly for the font you selected from Google Fonts. Double check that the @import code is at the very top of your CSS. If you left the quotes in the font-family property, remove them. If you are still having trouble, post a link to the page where the problem is occurring.

---

Some tips:

- Display or Fancy looking fonts should be used sparingly and are best suited for headers or special reasons. At smaller scales these fonts can become hard to read and may deter people from reading what you wrote.
- Use regular san-serif or serif fonts for the body of your text.