In Using Google Font API article I've presented one method of incorporating specific fonts into your website. The Google's method will free you from any legal problems related to hosting unlicenced fonts, however, there are couple of drawbacks. Fonts have to be downloaded from Google's servers and that takes time. Secondly, there are only 14 fonts available as of today.
How about hosting your own fonts?
To start I'll present a practical solution.
Decide which font ( OTF / TTF ) you would like to use and download it to your computer ( make sure that you have a right to use it on your website! )
To ensure cross browser compatibility you'll need to generate some other formats of the font files:
- EOT - Internet Explorer
- original OTF / TTF - Firefox 3.5, Safari
- WOTT - Firefox 3.6+
- SVG - portable devices ( iPhone, BlackBerry... )
To generate these formats you can use @font-face kit generator ( a free online service ) from Font Squirrel. This is my favourite as it creates all files needed + demo CSS / HTML files.
Using your favourite FTP program transfer the font files and CSS file to your website ( in this example the target is /wp-content/fonts/copperplate/ folder ). Your CSS file:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 22, 2010 */
@font-face {
font-family: 'Copperplate-GothicMedium';
src: url('/wp-content/fonts/copperplate/copperplate-gothic-medium-webfont.eot');
src: local('☺'),
url('/wp-content/fonts/copperplate/copperplate-gothic-medium-webfont.woff') format('woff'),
url('/wp-content/fonts/copperplate/copperplate-gothic-medium-webfont.ttf') format('truetype'),
url('/wp-content/fonts/copperplate/copperplate-gothic-medium-webfont.svg#webfontoyWTzvOk') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Copperplate-CdMedium';
src: url('/wp-content/fonts/copperplate/copperplate-cd-medium-webfont.eot');
src: local('☺'),
url('/wp-content/fonts/copperplate/copperplate-cd-medium-webfont.woff') format('woff'),
url('/wp-content/fonts/copperplate/copperplate-cd-medium-webfont.ttf') format('truetype'),
url('/wp-content/fonts/copperplate/copperplate-cd-medium-webfont.svg#webfontErF1CdGe') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Copperplate-GothicBold';
src: url('/wp-content/fonts/copperplate/copperplate-gothic-bold-webfont.eot');
src: local('☺'),
url('/wp-content/fonts/copperplate/copperplate-gothic-bold-webfont.woff') format('woff'),
url('/wp-content/fonts/copperplate/copperplate-gothic-bold-webfont.ttf') format('truetype'),
url('/wp-content/fonts/copperplate/copperplate-gothic-bold-webfont.svg#webfontteYqFXuo') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Copperplate-GothicLight';
src: url('/wp-content/fonts/copperplate/copperplate-gothic-light-webfont.eot');
src: local('☺'),
url('/wp-content/fonts/copperplate/copperplate-gothic-light-webfont.woff') format('woff'),
url('/wp-content/fonts/copperplate/copperplate-gothic-light-webfont.ttf') format('truetype'),
url('/wp-content/fonts/copperplate/copperplate-gothic-light-webfont.svg#webfontiwxyBOvh') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Copperplate-CdLight';
src: url('/wp-content/fonts/copperplate/copperplate-cd-light-webfont.eot');
src: local('☺'),
url('/wp-content/fonts/copperplate/copperplate-cd-light-webfont.woff') format('woff'),
url('/wp-content/fonts/copperplate/copperplate-cd-light-webfont.ttf') format('truetype'),
url('/wp-content/fonts/copperplate/copperplate-cd-light-webfont.svg#webfontJ0lZRQtA') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Copperplate-CdBold';
src: url('/wp-content/fonts/copperplate/copperplate-cd-bold-webfont.eot');
src: local('☺'),
url('/wp-content/fonts/copperplate/copperplate-cd-bold-webfont.woff') format('woff'),
url('/wp-content/fonts/copperplate/copperplate-cd-bold-webfont.ttf') format('truetype'),
url('/wp-content/fonts/copperplate/copperplate-cd-bold-webfont.svg#webfontXCzEg8Un') format('svg');
font-weight: normal;
font-style: normal;
}Put this code into header of your pages:
<link rel="stylesheet" type="text/css" href="/wp-content/fonts/copperplate/copperplate.css"><style>
.CopperplateGothicMedium {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Copperplate-GothicMedium', Georgia, serif;
font-size-adjust: 0.55;
}
.CopperplateCdMedium {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Copperplate-CdMedium', Georgia, serif;
font-size-adjust: 0.55;
}
.CopperplateGothicBold {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Copperplate-GothicBold', Georgia, serif;
font-size-adjust: 0.55;
}
.CopperplateGothicLight {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Copperplate-GothicLight', Georgia, serif;
font-size-adjust: 0.55;
}
.CopperplateCdLight {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Copperplate-CdLight', Georgia, serif;
font-size-adjust: 0.55;
}
.CopperplateCdBold {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Copperplate-CdBold', Georgia, serif;
font-size-adjust: 0.55;
}
</style>Note: there are two methods of adding things to the header. Modify your theme(s) template ( not recommended ) or use Header and Footer plugin by Stefano Lissa which will do this trick without messing up your template files.
Now it's time for a little demo:
Copperplate Gothic Light
Copperplate Gothic Medium
Copperplate Gothic Bold
Copperplate Condensed Light
Copperplate Condensed Medium
Copperplate Condensed Bold
Demo's code:
<p class="note">
<span class="CopperplateGothicLight" style="font-size:16px;">Copperplate Gothic Light</span><br>
<span class="CopperplateGothicMedium" style="font-size:16px;">Copperplate Gothic Medium</span><br>
<span class="CopperplateGothicBold" style="font-size:16px;">Copperplate Gothic Bold</span><br>
<span class="CopperplateCdLight" style="font-size:16px;">Copperplate Condensed Light</span><br>
<span class="CopperplateCdMedium" style="font-size:16px;">Copperplate Condensed Medium</span><br>
<span class="CopperplateCdBold" style="font-size:16px;">Copperplate Condensed Bold</span><br>
</p>What was presented here is just a practical implementation. For better understanding of Web Fonts read the following: