How to Add and Use Web Fonts on your Website

 
added by Jibari Daniels on
Jul 14, 2014
 
0 likes
 1 comments
 
 

It can get a little tiring using the same generic Arial or Times New Roman Font on your website. If you would like to add a little bit of style to your site the first place I would search is replacing the plain boring typeface on your website.

Especially if you’re designing a website using the Flat UI standards, the font-family you choose plays a major role in how the website will come across to users. There are hundreds of unique font families to choose from this article will explain How to Add and Use Web Fonts on your Website. Adding web fonts to your website can be tricky, but if you follow this 5 step process you should have no problem learning How to Add and Use Web Fonts on your Website.

Step 01) Download the Fonts

First step is to read the license and make sure there is no limitations on the font you are using. Once you understand the license open up the zip file and find the actual font files. There are usually four of them, as highlighted below. Those are what you need to load onto your server via FTP.

Step 02) Upload the font file through your FTP

Choose the area you would like the font to be located. You have a couple of choices about where to put them on your server:

  1. You can put them in a folder at the “root” of your site, which means the same level as your index.html or index.php file.
  2. If you are using WordPress, you can put them in a folder inside your theme folder
  3. Or not in a folder at all

Really, there are various combinations and permutations, but you get the idea. Usually I do the second in the list. [NOTE: Some licenses will require that you up the security of the folder in which the fonts live. This gets tricky and I’d recommend paying a developer to do it for you.]

Step 03) Insert your Font Files in your CSS sheet

Now you’ve got font files on your server, but to actually have them show up on your site you’ve got to first include them via CSS. To do this, you’ll first want to open up the CSS file provided in that folder you downloaded where you grabbed your font files – it’s often called stylesheet.css. You’ll also need the stylesheet for your site open – if you’re on WordPress, that will be the stylesheet for your theme.
The code from the font folder will looking something like this:

/*
 * Web Fonts from thesitewhereyougotit.com
 *
 * Font copyright information, which you should
 * never delete and should always be included
 * in your CSS where ever you call the fonts files.
 * Copyrights matter.
 *
 */

@font-face {
 font-family: 'FontName';
 src: url('FontName.eot');
 src: url('FontName.eot?#iefix') format('embedded-opentype'),
 url('FontName-webfont.woff') format('woff'),
 url('FontName-webfont.ttf') format('truetype'),
 url('FontName-webfont.svg#FontName') format('svg');
 font-weight: normal;
 font-style: normal;
}

I’ve removed the pertinent details here, but the gist is that most times there will be a copyright message that you need to keep with the CSS they’ve provided. You’ll also see that this CSS snippet includes the URLs to the font files you uploaded to your server. Copy the full snippet and paste it into your theme or site CSS file. I usually put these font include snippets at the bottom of my CSS file, because it keeps them out of my way for future edits.

You may need to make some changes to the URLs in the snippet, depending where you put your files. For example, if you stuck them in a folder called “fonts”, you’ll need to add that folder to the URLs:

@font-face {
 font-family: 'FontName';
 src: url('fonts/FontName.eot');
 src: url('fonts/FontName.eot?#iefix') format('embedded-opentype'),
 url('fonts/FontName-webfont.woff') format('woff'),
 url('fonts/FontName-webfont.ttf') format('truetype'),
 url('fonts/FontName-webfont.svg#FontName') format('svg');
 font-weight: normal;
 font-style: normal;
}

You may also need to change the URL to ensure it correctly locates the fonts relative to your CSS file. If you don’t know what I’m talking about, you can circumvent that need by putting the full URL in there, e.g

src: url('http://yoursitename.com/fonts/FontName.eot');

Step 04) Open Developer’s Tools or Firebug

Once your fonts are properly included, you’ve got to assign them to various types of content, again using CSS. The best way to do this is to use a tool like Firebug or Chrome’s Developer Tools to view the source of your site.
howtoaddwebfonts01-designdecoding
The screenshot above is of Firefox firebug. You can learn more about firefox development by click here. Overrall firebug will allow you to know the correct declarations assigned to your font file in your CSS Sheet. Once you know your CSS selector, you can go ahead and edit your CSS. The best way to do this is to figure out where in your CSS the font selection is currently coming from. If it’s already on that selector, you should change it there (for example, in the screenshot above I’m looking at the .entry-title class, so I should start by trying to edit that). If that isn’t going to work out because of how your CSS is set up, you can add a new line for that selector.

In the example of .entry-title, my edited CSS would look like this:

.entry-title {
color: #222;
text-decoration: none;
font-family: 'FontName', sans-serif;
}

Step 06) Check you website and see if the font shows up

Sometimes things don’t happen the way you want them to right away. True in life, true in CSS. Especially true if you’re working from someone else’s code (in a theme, for example). You may need to use some trial and error to get things to show right, which often includes getting more specific with your CSS selectors, checking your site for errors, etc. Common problems with this particular process include:

  • Your URL to your font files is incorrect (this will show as an error in Developer Tools)
  • You didn’t add your CSS to the right stylesheet (maybe you put it in a theme that’s inactive)
  • You’ve got the wrong selector

That’s it, if you follow these rules you now know How to Add and Use Web Fonts on your Website.

Written by Jibari Daniels

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>