Fonts – Ben's Tutorials

Interested in using icons on your site but don’t want to host any images? Get away from image files by using Font Awesome‘s CSS icons. Here is a guide on how to download and use Font Awesome icons.

Go to Font Awesome and click the “Download” button in the middle of the screen.
Font Awesome Download button
A popup will appear asking if you would like use Font Awesome Pro (for a cost). I chose to stick with the basic version of Font Awesome, so I clicked the “No thanks, just download Font Awesome 4” button. This will download font-awesome-4.7.0.zip.
Download Font Awesome 4
Once font-awesome-4.7.0.zip has been downloaded, unzip its contents into the directory of your choice (locally or on your web server).
Font Awesome files
Now that you have the files in place, you just need to add a reference to Font Awesome in your HTML. Use the following code (assuming your HTML file is one directory above/ outside of the Font Awesome “css” folder:
```
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
```
Once you have created the link to font-awesome.min.css, adding icons is simple. Here is example code that would show a dollar bill icon:
```
<i class="fa fa-money" aria-hidden="true"></i>
```
You can see and search for all of the available icons here: The Icons.
There are numerous ways to enhance and customize the Font Awesome icons. Checkout the following documentation for that information: Examples.

While you can set the text on your webpage to use any font you desire (using CSS’s font-family property), it won’t guarantee that your users will see your text the same way. This is because your visitors may not have the same font installed on their device. This is why Web Safe Font conventions exist and the reason that font-family uses a backup system.

Luckily, you can get around this issue by including CSS font references in your HTML. This approach makes it so when your visitors open your website, a font is loaded in the background. Then your visitors will be able to render the font whether or not they have it installed.

Google Fonts is one service that hosts CSS font files. Here is a quick tutorial on how to use Google Fonts.

Go to Google Fonts and find a font that you like. You can do this by scrolling through the available fonts, looking at the FEATURED fonts, or searching. If you have already have a font in mind you may want to try What’s the Closest Google Font which has a list of popular fonts and their Google Font doppelgangers.
Once you have found the font of your dreams, click on the red plus icon to the upper right of said font.
Selecting a GoogleFont
A small dialog will appear at the bottom of the screen, containing your selection. Click on this dialog so that it expands.
Google Font selected
Once the dialog has been expanded you will see the code that needs to be added to your site in order for the font to display.
Google Font selection expanded

Here is an example of how you would use this code in your HTML file:

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
p {font-family: 'Roboto', sans-serif;}
</style>
</head>

<body>
<p>I'm using Roboto, a Google Font</p>
</body>

Tag: Fonts

Adding icons to your site with Font Awesome

How to add Google Fonts to your webpage