Using @font-face
@font-face is a CSS property that allows web designers to use custom typefaces on a website that aren’t installed on the browsers computer. This means that designers can now start to move away from web-safe fonts such as Arial, Georgia, Times New Roman, Verdana, Trebuchet and the gorgeous Comic Sans and replace them custom fonts.
The CSS
@font-face {
font-family: 'yourFontName';
src: url('/location/of/font/yourFontName.eot'); /* IE */
src: local('yourFontName'), local('yourFontName'),
url('/location/of/font/yourFontName.ttf') format('truetype');
}
h1{
font-family: 'yourFontName', Arial, Helvetica, sans-serif;
}
Considerations
Browser Support
Surprisingly Internet Explorer has been supporting @font-face since IE 4, however it only supports Embedded OpenType (EOT) fonts created by Microsoft’s WEFT tool.
This is the reason we have added the following line in the block of code above:
src: url('/location/of/font/yourFontName.eot'); /* IE */
This will ensure your fonts load as intended in Internet Explorer, however you will still need to convert your .TTF or .OTF files to the EOT format for them to work in Internet Explorer.
You can either use Microsoft’s WEFT tool to do this or one of the following online conversion tools, which we prefer:
When adding the .eot src to the @font-face rule, It’s essential you load the .eot version before the .ttf or .otf
You can read more on @font-face support at this link:
Legal Issues
Due to the fonts being hosted on your server, available to anyone, there are certain legal issues that you have consider before using @font-face.
You have to ensure that the font has a web-font licence, check the documentation that comes with the font or the website you downloaded it from before trying to embed it with the @font-face rule.
However, to help save you some time webfonts.info have published a regularly updated resource that lists some of the best typefaces that are available for use with the @font-face property:
What’s the Local thing about?
local('yourFontName')
This tells the browser to look on the users’ computer to see if the font exists locally before trying to load it from your server.
@Font-Face Examples
