Coding Basics II

Lesson 2

Web Fonts

What Are Web Fonts

Well Web Fonts are exactly what they say they are, they are fonts that are able to be used online. With that being said not all web fonts work on all browsers so you have to becareful on which you use. Now there are different ways you can install web fonts from Google Fonts to fontawesome below i'll explain the differences and how to install them the quickest and easiest way.

Google Fonts

Google Fonts is a service offered by Google which supplies you with a bounty of founts that will work across all browsers from chrome to Opera. Now adding a font is easy enough through google fonts

Step 1 Go here https://www.google.com/fonts and scroll through the list of fonts until you find one that suits your needs.

Step 2 Click on the middle button of the three buttons that are to the left of the add to collection it is the quick use buttone.

1

Step 3 From there it will ask you to select which fonts of the font family you would like. Do so.

2

Step 4 The easiest way to use Google Fonts is to click the @import button which gives you a link to put into your CSS

3

Final Step add the link to your CSS and upload.

4

Now repeat for your own site and enjoy!

Font Awesone

Font Awesome on the other hand is more for icons than it is text fonts. Font Awesome has a catalog of Icons that can be placed into a website that will be registerd as text.

Step 1 Go to http://fortawesome.github.io/Font-Awesome/ and hit the download link at the top of the screen.

5

Step 2 go to the get started tab and follow Easy:Default CSS and copy the file you just downloaded into your css folder. As well as the line of code below to the top of your website.

6

Step 3 Look through the font awesome directory until you find the icon that you would like to use.

Then Copy the line of code which you can get by right clicking and inspecting the icon below to the right.

From there you can do wonderful things like apply css to said icon to make it a different color.

7

You'd change the color by finding the line of code (image above and next to the stylesheet link) since I used the Facebook icon for my example thats what i would find and can be changed for all icons that font awesome has to offer.

Font Squirrel

Font squirrel is going to be the last web font I will teach you of. Here is how you use font squirrel.

First you go to the homepage of font squirrel where much like google fonts a list of fonts are provided to you on the homepage.

After the font has been selected you hit download OFT after that it will begin to download when finished you will have a zip folder with the font inside of it.

You then proceed to install the font.

After it is installed go to your css and create a variable for which ever item you want to target with the font and then add the font-family that you selected to it.

When the drop down font menu opens go to manage fonts down at the bottom. Once that menu opens click the customs fonts stack tab at the top.

There is where you will find your download font. After you select it click done, save and upload/update your css style sheet.

Pros and Cons

Pros

The pro's of web fonts are they are extremely versatile and you can find anything to fit your needs even if its icons to just header font face you can find what you are looking for.

Cons

Now as i said most web fonts will work universely but there are a few cases where a font wont work. There is also the case of trying to import to man fonts into a site and causing it to slow down.

Test Your Knowledge Here!