Use custom @font-face in CSS3
Saturday, November 12, 2011 EST
by: Eric Potvin
Tags:css
A great new feature in CSS3 is the ability to import your font to your website without creating an image. This allow the website to not use the default font like arial, tahoma or verdana which are native to most Internet browsers.
@font-face url or src will load the external site to download the required font and then use it.
For example:
@font-face {
font-family: 'squealer';
src: url('/path/to/font/squealer-webfont.eot');
src: url('/path/to/font/squealer-webfont.eot?iefix') format('eot'),
url('/path/to/font/squealer-webfont.woff') format('woff'),
url('/path/to/font/squealer-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1 { font: normal 50px "squealer"; }
and then use it
<h1>asdasd</h1>
Demo
Use custom @font-face in CSS3
Cross Browser Compatibility
Each browser supports different font formats:
- Firefox supports Embedded Open Type (.eot) and TrueType (.ttf)
- IE supports Embedded Open Type (.eot)
- Safari supports OpenType (.otf), TrueType (.ttf), and Scalable Vector Graphics (.xvg)
note: using all types makes your site compatible with most users.
This is an elegant solution for replacing images and make your site loads faster!
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
Use custom @font-face in CSS3 | Book Of Zeus<a href="http://www.bookofzeus.com/articles/use-custom-font-face-in-css3/" title="Use custom @font-face in CSS3">Use custom @font-face in CSS3 | Book Of Zeus</a>
Short URL:
Use custom @font-face in CSS3 | Book Of Zeus<a href="http://s.bookofzeus.com/cd2eM" title="Use custom @font-face in CSS3 Short URL">Use custom @font-face in CSS3 | Book Of Zeus</a>