How To Use Custom Fonts On Your Website With CSS?
Let’s do an example together. Download bttf.ttf (Back to future font) from here.
Create a css block like the following. “MyCustomWebFont” is the name of my new web font style i will use on website.
[css]
@font-face {
font-family: MyCustomWebFont;
src: url("bttf.eot"); /* EOT file for IE */
src: local(bttf_font), url(‘fonts/bttf.ttf’) format(‘opentype’); /* TTF file for CSS3 browsers */
}
h1{
font-family: MyCustomWebFont;
}
[/css]
Put the css created above on <head> section or in external stylesheet. Once placed place the bttf.ttf file inside the same folder your stylesheet is in. Remember that bttf.ttf does not work in old versions of IE(Internet Explorer) so you will need to create a EOF(Embedded OpenType) font file from .ttf. This is a good tool for converting .ttf files in to .eof file. Once converted download bttf.ttf and place at the same folder your bttf.ttf was placed.
Write some sort of HTML block for testing. In the above example we created css style for <h1> for try something like this in your HTML page:
[html]<h1>The quick brown fox jumps over the lazy dog</h1>[/html]
