Web Design - using Google Fonts & Special Characters

Using Google Fonts

While you can always just use typical fonts that should exist on most computers, there are times when you may like to be able to have more choices and control the font display a bit more.

Google provides over 818 different font styles that you can include.

Step 1. Go to https://fonts.google.com/

Step 2. Choose a font that you would like to use by clicking on the red + sign up on the right

You will notice a black box at the bottom of the screen that says "1 Family Selected"

** you can import more than one font at a time if you like but start with just one to get it to work

Click on that box and then choose the EMBED and then @IMPORT option

From here all you need to do is copy the @import line and put it at the top of your css sheet

Then add a font-family of the type you chose and include it in one of your styles (such as the headings or paragraph)

Notice that the Google Font box will also have that code ready for you to copy

Here is an example - if this is in the style section then all p tags on my page will use this font

p {
font-family: 'Barrio', cursive;
}

* You can import more than one font, and there are also options to customize the sizes, weights, etc when you are selecting on the Google Fonts page