Your Customers are Mobile, you will be too …

Note: This tutorial has been checked and moved for CS6. For the CS6 tutorial view this tutorial.

In this tutorial we will show you the basic of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS5.5 development environment it can be used not matter what editor you are using. Even other levels of dreamweaver can use this tutorial, even though major support has been added to dreamweaver CS5.5 for CSS3 @font-face is not amongst the properties it has been expanded to include.

Using @font-face with Dreamweaver CS5.5

Important: Before embeding font-kits into your website for deploymeny you need to ensure you have your licencing arrangements sorted out with the font foundry from whihc you obtained the font. They will usually require a licencing fee. DO NOT use embedded fonts without this licence.

There are many fonts out there that allow you to use them for free for pirvate projects just make sure you read any licencing agreements prior to using them live on the web to avoid any nasty legal shocks down the track.

The @font-face CSS declaration is supported by the following browser versions

  • Opera 10.1
  • Firefox 3.5
  • Safari 3.2
  • Google 5.0
  • Internet Explorer 9.0

Any version of the above browser or higher will support the @font-face declaration. If developing with a lower version of these browsers in mind font-face’s are not for you. If you can use them though it is prefered as it reduces the use of images for text which has some advantages:

  • Less HTTP calls. If your webdesign uses more than one image in place of text you will save a HTTP call for each image no longer needed reducing the hardware power on your server being used to process each page.
  • Less bandwidth. Take a look at how many images you are removing, are you removing more than 40k of images by no longer needing to use images where your text is going. If so you will be saving on bandwidth as well. If you are hosting externally you will be saving on bandwidth even if you only save one image being used.
  • Improved searchability. Yep improved SEO because and image is not searchable however text is. By replacing an image with text you have more text being searched by search engines. Also as font kits are usually used for your major heading etc you will have less headings being doen with text and they hold more weight with a search engine when it comes to page rankings. So its a double wammy in your favor.
  • Improve look and feel to your site. The use of fontface will help to seperate you from your online competition and look more professional, however as with any new toy online don’t overdo it. It could be counter-productive.

There are 2 options available to you when using web fonts, you can host them yourself or they can be hosted externally usually with the font foundry that created them. Both methods have their own advantages and disadvantages.

  • Hosting the font yourself gives you far more control over how you use the fonts but this usually costs more for the licence to use them and as you are hosting it naturally you are taking care of any bandwidth involved.
  • Hosting with the font foundry is cheaper both in cost to licence the font and uses less badnwidth on your server, however this is at the cost of the control you have over as well as the speed at which your webpages will load. You will experience a slight increase in your pages loading times.

Creating a Font-Face Kit

Before we embed our chosen font into our dreamweaver project we need to establish a font face kit. There are a lot of tools available on the web to do this but by far the easiest and most commonly used one is Font Squirrel. So lets goes there and create our first font-face kit. The landing page you will land on is very hand and you should probably bookmark it for future reference.

The landing page will ask you a few quick questions on what sort of option you want. Naturally unless you know what you doing we should leave the settings at optimal which is the default. This will ensure the font kit you receive all the file types will be set up to load as fast as possible. Click on the button that says + Add Fonts. A window will now open allowing you to navigate to where the font you wish to prepare for the web is kept on your computer. Once you found click open and it will begin uploading the file to the server ready to be processed.

If you need to create font kits for more than one font for your project you can hit the add fonts button as many times as you need to. However if you are using more than one please consider donating to font squirrel for their fantastic service.

Once you have selected all the fonts you need you need to click the little tick box to say that you are legally allowed to use the font for web based projects. Once you hit that a new button will appear allowing your to download your fontkit, this process may take a few mintues while it processes the fonts but eventually a download window will appear. Save your new zip file and we are ready for the next step.

Getting the Face-Face Kit Ready for our Dreamweaver Project

This is probably the easiest stage of using font faces. Once you have the font kit created go to the directory containing your dreamweaver site. Create a new folder called fonts. Unpack your zip file into this folder and we are ready to move on to actually using the font kit.

The @font-face Bullet Proof Technique

Due to IE liking to be different to everyone else web designers are forces to use tricks or hacks to prevent it from loading all the font types when it loads your website rather than just the one that it needs. Naturally this means a lot of wasted bandwidth so we will force IE to load only the one with what is known as the Bullet Proof Technique.

Despite the vast improvements made by Dreamweaver CS5.5 with CSS3 it does now support font faces in code hinting or any of the CSS panels or other inputs. Live view does however display it correctly now so it has made a slight improvement in this area. However this does mean that no matter what version of Dreamweaver we are using we will have to enter the code into our CSS document manually. So lets open it up and get into it.

We start by going to the top of the CSS file in code view and make @font-face our first declaration. Inside our curly brackets we need to declare a name we wish to use for our font using the font-family declaration. We then need to start defining a source for our fonts. Bare in mind you can have as many of these declaration as you like, just place them up the top of your css file.

@font-face {
  font-family: 'testfont';
  src: url
}

Now as we start to type URL the code hinting will kick in, with URL highlighted in the code hinting hit enter and navigation window will appear so we can chose our file. Because internet explore is the browser being the pain we need to get it out of the road first so we need to select the .eot file first. This is the file extension that IE supports. It does not support the other file types. So locate the .eot file and hit OK.

@font-face {
  font-family: 'testfont';
  src: url(fonts/testfont-webfont.eot);
}

This will now load the eot file for IE now we need to work on the other browser while tricking IE into thinking there are no more files needed to be downloaded. So we need to declare a new src file with a local path, but we want it to be a file that could not possibly be on the users computer. The original versions of this technique use a smiley face but we will use an exclamation mark.

@font-face {
  font-family: 'testfont';
  src: url(fonts/testfont-webfont.eot);
  src: local('!'),
  url(fonts/testfont-webfont.woff) format('woff'),
  url(fonts/testfont-webfont.ttf) format('truetype');
}

We only really need to concern ourselves for now with the truetype(ttf) and web open (woff) formats. These will cover the majority of browsers however if your do wish to add any other formats ensure you place a coma between them.

Now that we have done that the font kit is ready to go, all we need to do now is the font somewhere in our webpage. So lets say we are going to change the font type in our h2 heading tags this is how we would apply it.

  font-family: 'testfont', Verdana, Geneva, sans-serif;

Note how we still have backup fonts listed, this is highly advisable. There are a few technical problems that could for some reason or another prevent our font from loading we still need our backups.

hopefully you have found this tutorial to be helpful and hope to see you again soon.

12 Responses to Using @font-face with Dreamweaver CS5.5

  • Thanks Stephen. Really useful tips for using @font-face in Dreamweaver.

    Best regards

  • Thanks for the article. Note: you can enter @font-face in Dreamweaver’s design view by creating a font-face class and then changing the dot to an at-sign in the css styles panel.

    All required properties are there in the css styles. However, for bulletproofing you will need to add a second src in the value of your first source. Works fine.

    -Jason

  • This is confusing. The font kit from Squirrell already has the @font-face code in its stylesheet. Are you attaching the Squirrell css stylesheet and adding to it, or are you making a completely new css stylesheet??

    • yes the font kits do come with their own style sheets. however as they can’t be 100% on where you are going to put your font kit this style sheet isnt always going to be accurate.

      Also you should already have a style sheet that handles the rest of your styles for the rest of the site. It is good practice to minimise the amount of style sheets etc that need to be loaded everytime a user opens a webpage. So you should be combining the 2 style sheets into 1. This reduces HTTP requests on a page loading.

  • Howdy I am so thrilled I found your blog page, I really found you by accident, while I was browsing on Bing for something else, Regardless I am here now and would just like to say thank you for a fantastic post and a all round thrilling blog (I also love the theme/design), I don’t have time to read through it all at the minute but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the excellent work.

  • I got thіs sіte fгom mу рal who informed
    mе about thiѕ website and at the moment this tіme I am bгοwѕing thіs
    ωeb рage and rеadіng ѵery
    informative artiсles οr revіеws at this time.

  • I have been examinating out many of your stories and i can state pretty clever stuff. I will definitely bookmark your website.

  • hello. thanks for the info…. wondering if it is possible to see the changes with the @fontface properties during the design process before the site is hosted? thank you

    • Yes. If you build the entire site in dreamweaver locally you can simply upload the entire site in one hit and the fonts etc will go with it.

  • I would like to thnkx for the efforts you’ve put in writing this web site. I am hoping the same high-grade blog post from you in the upcoming as well. Actually your creative writing abilities has inspired me to get my own web site now. Actually the blogging is spreading its wings rapidly. Your write up is a good example of it.

  • HOLA, ME GUSTARIA SABER POR QUE AL MOMENTO DE PUBLICAR NO SALEN CON LA MISMA TIPOGRAFIA, PERO ME PARESE EXTRAÑO YA QUE HABRIENDOLO DE MI CARPETA LOCAL AL ABRIR SI LOS PUEDO ABRIR, LAS TIPOGRAFIAS NORMA MENTE LAS TENGO DESINSTALADO PARA VER LA DIFERENCIA.
    COMO LE DECIA EN INTERNET NO LO PUEDO VER LAS FUENTES QUE ESTOY COLOCANDO, PERO ABRIENDO DESDE MI CARPETA LOCAL SI LOS PUEDO VER.
    AYUDAAAAA!!!! URGENTE PLEASE!!!
    YA E USADO @FONT-FACE EN LA HOJA DE ESTILOS CSS, ACTUALMENTE TRABAJO EN DREANWEAVER CS5.
    GRACIAS, SALUDOS

    • Mi espanol no es bueno. Todavia estoy aprendiendo.

      Creo que usted esta tratando de decir es tu @font-face funciona en su maquina local pero no en tu sitio web. Necesito ver su @font-face declaracion.

      Copie y pegar lo aqui para que yo pueda verlo.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: