Back to Top
Design Cuts

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:

webfonts tutorial

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:

webfonts tutorial

webfonts tutorial

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

webfonts tutorial

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:

webfonts tutorial

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):

webfonts tutorial

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%;}

h1 {
color: #1F1F1F;}

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:

webfonts tutorial

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:

webfonts tutorial

Becomes:

webfonts tutorial

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 */}

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

h1 {
color: #1F1F1F;}

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:

webfonts tutorial

“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! πŸ™‚

webfonts tutorial

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:

webfonts tutorial

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

webfonts tutorial

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):

webfonts tutorial

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

webfonts tutorial

5. Save the files and admire your webfonts!

webfonts tutorial

And we’re done!

webfonts tutorial

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)

26 Lovely Comments from our Community:

  1. Mark Etherington says:

    Thanks for this, very helpful! Unfortunately though for some reason the web fonts won’t work for me on mobile πŸ™

    Any ideas?

    Thanks

    • Mark Etherington says:

      Infant, it’s only working on my desktop as I had the font installed. When I de-activate the font on my computer it then doesn’t work online at all πŸ™

      • Mark Etherington says:

        Resolved! Sorry, all to do with the path to the fonts!

        • sarah-jane@designcuts.com says:

          Hey Mark,

          Thank you so much for your comments and we are so glad to hear that this is working for you now πŸ™‚

          As always though if there was ever anything I could assist you with, please do get in touch- I’m always happy to help!

  2. Daniela says:

    Hello!

    I’ve been struggling with @font-face for days just unable to make it work! This video cleared EVERYTHING up for me and I’ve got my fonts up and running on my site. Thank you, thank you for being thorough and concise- this is just made my day πŸ™‚

    Also, it’s nice to see a woman delivering the info!

    Thanks again!

    • Carol Sweeney says:

      Hey Daniela,

      Thanks for the comment! We are so pleased that you enjoyed the tutorial and that you were able to get working with your fonts :).

      Your email has actually made our day over here Daniela so thank you! if you ever do have any questions, please let us know- we are always here and happy to help!

  3. Serge says:

    Many thanks Jo for this most interesting tutorial.
    I came across a WP plugin which might do the trick.

    It is called “Use Any Font”
    https://wordpress.org/plugins/use-any-font/

    Do you think it is usable for that collection of fonts ?

    Many thanks again

    • Ben Neeves says:

      Hey Serge,

      Thank you so much for getting in touch with your kind words and for your suggestion! We really appreciate you taking the time πŸ™‚ We don’t currently work with any plugins like this and would always recommend this tutorial for your webfonts but I will certainly pass this over to our technical team to see if this could work.

      Thank you again for your feedback, Serge! If you had any other suggestions please do let me know. It would be great to hear from you πŸ™‚

  4. Noelle Mena says:

    Hey there, is this the updated tutorial based on the above comment …

    Is there another way to do this without @font-face? I just read this off their website…

    I just want to know before I start following these instructions
    Thank you and very thorough tutorial! Love having the video and the text.

    • Ben Neeves says:

      Hey Noelle,

      Thank you so much for getting in touch with your query, I can certainly assist you with this πŸ™‚

      I’m pleased to report that this tutorial is completely up to date so you should be good to go! We would always recommend working with @font-face but if you do expirience any issues please do let me know and I will happily lend a hand πŸ™‚

      I hope this helps, Noelle, and please don’t hesitate to contact me should you have any other questions. I’m always happy to help!

  5. Alan Mattano says:

    Yes Jo Fallon!
    Thanks for your instructions . A “style” folder where to put css and fonts is much simple. This help me a lot than adding ../ for going out from the “css” folder. Example: “../fonts/font-name.woff”.

    Place include this video link into the installation file: Important-Installing-your-fonts.txt
    Brilliant putting everything together on such short video !
    Alan MattanΓ³

    • Ben Neeves says:

      Hey Alan,

      Thank you so much for your incredibly kind words! It’s so great to hear Jo’s tutorial was a big help in getting you set up with your web fonts πŸ™‚

      If you do have any questions or if there is ever anything myself or the team could assist you with please do get in touch. We’re always happy to help!

  6. Tammy says:

    Is there another way to do this without @font-face? I just read this off their website:

    Our Google Announcement πŸ™

    Google have recently announced that they are also entering the web-font market – with the same free, hosted model as ours.

    Although we have put 100’s of hours into the design, development and readying of 150+ fonts (x4 formats = 600!), with only weeks before font-face.com was ready to go live, we have decided to bow out now. A bitter blow to the team.

    Our decision has not been easy. Although we feel we would offer a better service, we would after all be competing with Google. A massive might to compete with.

    The last thing we would want is to host fonts for everyone to link to, only to at some point (after google have beaten us) be forced to turn them off – destroying your website designs.

    So as not do disappoint you in the future, we have decided to stop now. Have no fear though – we will be back! We are hatching a new plan for font-face.com – stay tuned!

    font-face.com will still be the home of everything font-face, just not in the original way it was intended.

    Thanks

    The font-face.com Team x x

    • Carol Sweeney says:

      Hey Tammy,

      Thanks so much for the comment and for the heads up!

      We weren’t aware of this so we really appreciate you bringing it to our attention. We are going to look into this and never fear, we will work around this. There has been a mention of an updated tutorial on the back of this but i shall keep you updated on this!

      I hope this helps, and please don’t hesitate to contact me should you have any other questions.

  7. Jo and Design Cuts Team:

    i decided to try VERB on one my sites – it’s not outrageous – and it is quite professional looking.

    here it is:

    http://charlieobrienvoice.com/index.html

    Best,

    Tom L
    Canada

    • Tina Muller says:

      Ah and there it is. Looks like it worked out really well for you. The fonts looks great.

    • Jo Fallon says:

      Looks great Tom! As you said, it’s very smart and professional looking. Little details like that really help. Hope you enjoy using them on more sites πŸ™‚

  8. Tom Leparskas says:

    Thanks Jo. And we love your accent.
    Going to attack some webfonts today!

    Best
    Tom L
    Canada

  9. Jennifer says:

    Awesome tutorial Jo! I had tried to do this and got, oh, so close, but was missing the essential bit to make it work and now I have this in my hands, thanks to you!!

    • Tina Muller says:

      Awesome stuff. I’m so glad to hear this tutorial really helped you with the web fonts. Jo did an amazing job explaining how to do it right. πŸ™‚

    • Jo Fallon says:

      Thanks Jennifer! Webfonts can be tricky to get to work exactly right (that’s genuine relief you see in the video when it worked!) so glad this solved the problem for you. πŸ™‚

  10. Jasmine says:

    Thanks so much! I’d always been confused by how to use webfonts so this tutorial was awesome. I like how she didn’t speed through and that she showed us the code to make our sites pretty with amazing font. Yay!

Leave us a Comment