I’m going to show you how easy is to embed some cool fonts into your HTML websites without rendering the fonts or exporting your entire design to jpegs. The font of your desire, CSS3 and the @font-face Generator from FontSquirrel makes our life as web developers/designers a little bit easier. Lets get started !
First, once you have selected your font, follow the next link, http://www.fontsquirrel.com/fontface/generator this is the @font-face Generator, an online tool that help us converting the selected font to a set of files ready to be used for web. The result is a set of specific files that will work on different browsers.
Then, click on “Add Font”, selec your desired font. The selected font will be uploaded an readed and its information will show up. Select “Optimal” as the settings and check the Agreement, then click on “Download Your Kit”.
The downloaded file will look like this
The stylesheet.css file contains the CSS3 @font-face code mapping all the generated files in order to work on all kind of browsers, the code will look like this
@font-face {
font-family: 'BebasNeueRegular'
src: url('bebasneue-webfont.eot');
src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
url('bebasneue-webfont.woff') format('woff'),
url('bebasneue-webfont.ttf') format('truetype'),
url('bebasneue-webfont.svg#BebasNeueRegular') format('svg')
font-weight: normal
font-style: normal
}
Now you have two options, the first one is to copy this code an paste it into your own stylesheet an then make a class that will be used to add some style to your text, something like this
@font-face {
font-family: 'BebasNeueRegular';
src: url('bebasneue-webfont.eot');
src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
url('bebasneue-webfont.woff') format('woff'),
url('bebasneue-webfont.ttf') format('truetype'),
url('bebasneue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal
font-style: normal
}
.cool-text {
font-family: 'BebasNeueRegular'
}
The second option is to rename and link the downloaded .css file and use it on your text the same way as the class we created above, for example, cooltext.css
DO NOT FORGET to place the ttf, eot, woff and svg files on the same folder as the css file containing the @font-face directive, or edit all the code to match your code specifications.
Here is an example of how it looks, cool text, selectable and in many cases SEO friendly.
Se ya.