Sunny Books
What we have

CSS3 The Basic of @font-face

@font-face is a CSS rule which allows you to specify fonts on web pages. with this rule, web pages can not only display computer preloaded fonts like Arial, Times New Roman, Verdana and Trebuchet, but also have a variety of choices of non-web safe fonts.

Traditionally, when we want to show no-web safe fonts for web pages, which means using fonts not installed on the users computer, we usually hide the text, and replace it with an image of that text. When using @font-face, we can show the text directly, that saves us a lot of time and bandwidth.


@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot');
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
       url('myfont-webfont.woff') format('woff'),
       url('myfont-webfont.ttf') format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;

font-family: This sets the identifier of the font. This font can be used anywhere in the site, just put the custom font identifier at the beginning of "font-family" like: font-family: MyFontFamily, Georgia, Palatino, Times New Roman, serif;

second line src:The src tells the browser that when "MyFontFamily" is called, it should load the myfont-webfont.eot file from the url mentioned. if the fonts file is put in a folder, the url should be myfont-webfont.eot.

third line src: this src is for cross-browser compatibility since all the major browsers have their own font formats to support.

font-weight and font-style:Setting the font-weight and font-style to normal here will ensure that all browsers default to the same values. This makes it so that you can apply a faux bold or italic style later in the CSS. Without this snippet, Webkit browsers will ignore any weight or style commands.

Browser support






Cross-Browser Compatibility

Different browsers has different fonts file formats to support.

- Internet Explorer only supports EOT

- Mozilla browsers support OTF and TTF

- Safari and Opera support OTF, TTF and SVG

- Chrome supports TTF and SVG.

- mobile browsers like Safari on the iPad and iPhone support SVG.

Where to get free font types

Font Squirrel


Google Web fonts

@font-face Kit Generator This tool can generate all the necessary font types from one font type. Just upload one font type and you will get a package.