How to Install and Use Web Fonts

Hello again Design Cutters!

Jo here with little bonus for you this week! You’ve already had a couple of tutorials for some inspiration on how to use the resources in the current 30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing) deal, which we hope you’re enjoying.

One of the great features of this bundle is the inclusion of desktop fonts and webfonts allowing you to utilise them not just to make your print/graphic designs stand out, but your web designs too.

After several community members asked about exactly how to use the web fonts available in this bundle, we decided to put together a helpful guide, for all you guys who are new to working with web fonts. There’s no need to be intimidated or put off from using web fonts, and as this guide will show you, they’re quite easy to use once you understand the basics.

Ok, lets get started!

There is a full text version of this tutorial below, but I’ve also put together a short video walking you through each step of the process. You’ll be using your new web fonts in no time :).

Step 1: Select your webfonts

Here we have our basic webpage:

As you can see, it could do with a little webfont love to liven it up.

The first step is to decide which fonts you want to use (there’s a list of resources on how to match fonts in ‘Step 9’ in my previous tutorial). In this example we’re going to use ‘Atlas Slab’ and ‘Polly’ as our fonts:

Once you’ve decided on the font, navigate to the webfonts folder within it, and you should see something like this:

You’ll notice there are a variety of different formats that webfonts come in:

WOFF
Stands for: Web Open Font Format

WOFF fonts were created specifically for web use, and often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format is generally preferred because it can also include metadata and license info within the font file itself.

SVG / SVGZ
Stands for: Scalable Vector Graphics (Font)

An SVG is a vector re-creation of the font, which makes it a smaller file size, and is also great for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone. Currently SVG fonts are not supported by Firefox, IE or IE Mobile. SVGZ is a zipped version of SVG.

EOT
Stands for: Embedded Open Type

This format was created by Microsoft and is the only format that IE8 and below will recognize when using @font-face (we’ll cover this in Step 3) within a stylesheet.

OTF / TTF
Stands for: OpenType Font and TrueType Font

Although being phased out in preference for WOFF, OpenType has the capability to include swashes, ligatures and alternate characters, which is a bonus for many designers.

Although you may be able to get away with just using the .woff file, if you want to be as requirements of different web browsers, as each have limitations as to what file types they can support.

Once you’ve decided on and found the webfonts you want to use, we’re ready to move on to the next step…

Step 2: Uploading your webfonts

The next thing we need to do is to get the webfont files on to your website’s server either via FTP or File Manager if you use cPanel (I’ll be using cPanel in this tutorial). Let’s take a look what’s already there:

Ignoring the cgi-bin folder, we’ve got our html file and css file. We need to upload our webfont files within the same directory as our css (this helps reduce the chance of problems and errors occurring):

Once you have your files in uploaded in the right place, we need to edit our css stylesheet to assign our webfonts to the text…

Step 3: Modifying your css file with @font-face

With your files in the right place, the first thing you need to do is update your css file to let browsers know where they can find the webfonts. We do this by using the @font-face declaration.

Let’s take a look at our css stylesheet as it stands:


body {
background-color: white;
padding: 2%;}

p {
color: #1F1F1F;
line-height: 120%;}


So far, no specific fonts have been specified for the header (h1) and paragraph text (p), so all text is displayed at the browser’s default font and size, which is usually less than inspiring! :p

Let’s start taking some control of how we want our fonts to look. At the very top of your stylesheet, type or copy and paste:


@font-face {
font-family: 'My Webfont';
src: url('mywebfont.eot'); /* IE9 Compat Modes */
src: url('mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('mywebfont.woff') format('woff'), /* Modern Browsers */
url('mywebfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */}


If you’re not used to css, this may look a little scary – but don’t worry! Once you’ve pasted this text in to your stylesheet, the modifications you need to make are very simple:

1. Where is says font-family: ‘My Webfont’; change ‘My Webfont’ to the name of the font you’re using. In this case ‘Atlas Slab’ (you could call it anything you want, we’re using the font name here because it makes most sense. You could use an abbreviation if you wanted.)

So:
font-family: 'My Webfont';

Becomes:
font-family: 'Atlas Slab';

2. Where it says url(‘mywebfont.eot’);, you need to change ‘mywebfont’ to the name of the font exactly as it’s typed in the original webfont file we uploaded earlier:

So:
url('mywebfont.eot');

Becomes:
url('atlas_slab-webfont.eot');

It’s extremely important that you make sure the file names match exactly to the original files – double-check capital letters, underscores and hyphens.

Update the name for all the files, so that:

Becomes:

Note: What we’ve just updated is the location of the webfont files. If you uploaded the files to a directory that’s different to where your css file is located, you’ll need to specify the directory too (eg: url(‘webfonts/atlas_slab-webfont.eot’);)

Once you’ve added the @font-face declaration to your css file for your webfonts, we can apply them to our text!

Step 4: Modifying our css file to display the webfonts

Our css file should now look like:


@font-face {
font-family: 'Atlas Slab';
src: url('atlas_slab-webfont.eot'); /* IE9 Compat Modes */
src: url('atlas_slab-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('atlas_slab-webfont.woff') format('woff'), /* Modern Browsers */
url('atlas_slab-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('atlas_slab-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}

p {
color: #1F1F1F;
line-height: 120%;}


We now want to specify which text we want to apply the webfonts to. In this case, we want our header text to use ‘Atlas Slab’. Let’s specify this by updating our h1 style, adding the line:

font-family: 'Atlas Slab';

This needs to be the the same name we specified earlier in ‘font-family:’ in the @font-face declaration. Our header style now looks like:


h1 {
color: #1F1F1F;
font-family: 'Atlas Slab';}


Make sure you save the file, then let’s take a look at our site:

“Yeah Webfonts” indeed! We’ll tweak this slightly by specifying a size that displays the font at its best (this will vary font-to-font). Add the line:

font-size: 40pt;

to your h1 style, so it looks like this:


h1 {
color: #1F1F1F;
font-family: 'Atlas Slab';
font-size: 40pt;}


The result is much better! :)

Step 5: More fonts!

Since we now have a very funky looking header, it’d be nice to style our paragraph text too. Adding webfonts will increase the load time of your sites, so do choose carefully to create the most impact :)

Following the steps as before, we’ll add the ‘Polly’ webfont to our site:

1. Choose your webfont and locate the files:

2. Upload the webfont files to the same directory as your css file:

3. Add the @font-face declaration to your css and specify the webfont and file names (Note: each new webfont requires its own ‘@font-face’ declaration):

4. Apply the fonts to your css, specifying the font size as necessary:

5. Save the files and admire your webfonts!

And we’re done!

Hopefully this tutorial showed you how to get started using the webfonts which are included in this huge bundle. If you’ve got any questions, please leave a comment below and I’ll keep an eye out over the next few days and do my best to help :).

Remember, you can get this deal for 97% off this week! Grab it below, while you still can:

30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing)