Today I thought I would share a mini tutorial on how to embed a font on a website. This can ensure a consistent look and design to a website and doesn’t rely on all your viewers having the same font, which can end in tears as that nice lovely font you used gets turned into Comic Sans!
#The first step is to go find a font you like and want to use.
#Next you need to make sure you can legally use this font for your project!!
#Once all that is out the way you need to head over to www.fontsquirrel.com and press the @font-face generator link and follow the instructions.
#The generator will take your uploaded font and create a zip file which has multiple copies of your desired font in different formats so that every browser will be able to support your font.
#Also within this file you will get a CSS file. You can either link to this file separately or take the styles and place them within your current CSS file you currently using.
The code will look something like this:
@font-face {
font-family: ‘CoopLightRegular’;
src: url(‘cooplight-webfont.eot’);
src: url(‘cooplight-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘cooplight-webfont.woff’) format(‘woff’),
url(‘cooplight-webfont.ttf’) format(‘truetype’),
url(‘cooplight-webfont.svg#CoopLightRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
In order for this to work you will need to change the lettering in BOLD and remove the apostrophes and then direct this to your own font on your web server
e.g. src: url(fonts/cooplight-webfont.eot);
The last step needed is to use the name of the font in this case; ‘cooplight-webfont.eot’ (including the apostrophes) within the CSS styling of your desired DIV.
e.g.
#main-content p {
font-family: ‘CoopLightRegular’; font-size: 12px;
color: #000 }
Hopefully this has helped explain how to use the great @font-face feature. If not get in touch I would be happy to help further!
Until next time…
Matt
: )#
mattgilbey 