Since launching the site I’ve had a few emails regarding the font being used on allcreatives and also the technique used to embed the font. Despite two previous posts on the progress on @font-face I realised I hadn’t actually posted up on how to implement @font-face effectively, so here it is.
The process, thanks to fontsquirrel’s @font-face generator is now quite straight forward. If you are unsure of what @font-face actually is and what all the fuss is about then hop over the fonts category and take a look at my last two recent posts on the subject. Using the aforementioned generator we should be able to achieve @font-face perfection is two simple steps.
Font Squirrel have a great resource for prepackaged @font-face kits which are available here otherwise you can take a font you have already on your system and run it through the @font-face generator. Just to note that you will have to check the license agreement for any font you use with this generator to make sure you are legally allowed to embed it.
Now following the steps on the generator page you should now be presented with download package. Take this, download, unzip and then re-upload the font files contained to your web hosting under a sub-directory such as fonts. Do this in the same way you would with a stylesheet. The files you have uploaded should be as follows for each font family you have ran through the generator:
Now we have our relevant font files uploaded all that’s left is todo is add the CSS code to our stylesheet the font(s) to be embedded and used. Within the package from Font Squirrel you should have an example CSS file that looks something like this :
/* * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish. * */ /* * * The fonts included are copyrighted by the vendor listed below. * * @vendor: West Wind Fonts * @licenseurl: http://www.fontsquirrel.com/license/Dearest * * */ @font-face { font-family: 'Dearest Regular'; src: url('Dearest.eot'); src: local('Dearest Regular'), local('Dearest'), url('Dearest.woff') format('woff'), url('Dearest.ttf') format('truetype'), url('Dearest.svg#Dearest') format('svg'); } @font-face { font-family: 'Dearest Open Regular'; src: url('Dearest_open.eot'); src: local('Dearest Open Regular'), local('DearestOpen'), url('Dearest_open.woff') format('woff'), url('Dearest_open.ttf') format('truetype'), url('Dearest_open.svg#DearestOpen') format('svg'); } @font-face { font-family: 'Dearest Outline Regular'; src: url('Dearest_outline.eot'); src: local('Dearest Outline Regular'), local('DearestOutline'), url('Dearest_outline.woff') format('woff'), url('Dearest_outline.ttf') format('truetype'), url('Dearest_outline.svg#DearestOutline') format('svg'); }
Copy this in its entirety and paste it into your stylesheet. Now look for the parts of the above code that precede an extension such as dearest.svg and change this to the correct path for your font files (uploaded earlier), keeping the font name and extension in place. Obviously the dearest font name in the above code with be replaced by your font file name.
After you have successfully changed the paths to point to the correct location of your font files you can use use the font name in the css ‘font-family’ property as you would with Arial or Verdana. Remember that if your font name has spaces in it you’ll need to enclose the name on the font-family line in single quotes.
Now if you go ahead and check your page in Firefox, Safari or heck even Internet Explorer you should now find beautifully replaced fonts.
Just a final note however to say that whilst @font-face rendering on Mac computers is near perfect it may be a little sketchy on Windows machines, a lot of this has to do with the quality of the font be used. Some fonts just seem to cope better with embedding than others at the moment and whilst Macs seem to mask this better you may find that it is indeed the font itself at fault as opposed to the operating system.
Shaggy
December 8th, 2009
Very nice. I can’t wait to try it
