Using @font-face with Dreamweaver CS6

In this tutorial we will show you the basics of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS6 or 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 and CS6 for CSS3 @font-face is not amongst the properties it has been expanded to include.

Using @font-face with Dreamweaver CS6

Important: Before embeding font-kits into your website for deployment you need to ensure you have your licencing arrangements sorted out with the font foundry from which 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 private 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 done with text and they hold more weight with a search engine when it comes to page rankings. So its a double whammy 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 bandwidth 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 CS6 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 minutes 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 CS6 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 CS6 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.

(Visited 450 times, 1 visits today)