Custom Font in CSS

In order to use a custom font in your website, which may not available on your visitor PCs, you can use CSS @font-face syntax to instruct the web browser to download the custom font to the visitor PC.

The simplest form of @font-face declaration is this, you can use either TTF or OTF font file:

@font-face
{
    font-family: my_font;
    src: url('http://www.my_website.com/my_font.ttf');
}

p
{
    font-family: my_font;
}

Unfortunately, the above code works in Firefox (version 3.5+), Opera (version 10+) and Safari (version 3.1+), but not Internet Explorer. This is because Internet Explorer does not recognize TTF / OTF, it uses a proprietary format called EOT. To make your @font-face declaration works with IE as well, you must prepare two font files, one in TTF / OTF format and the other one in EOT format. To learn more about EOT, and how to convert TTF / OTF to EOT, please refer to this MSDN article.

We need to make minor adjustment to make the @font-face declaration to support both EOT and TTF font:

@font-face
{
    font-family: my_font;
    src: url('my_font.eot');
    src: local(my_font), url('my_font.ttf') format('opentype');
}

p
{
    font-family: my_font;
}

Note that we assign value to ‘src’ twice. The first time, we assign the EOT font. Then we assign a TTF font to ‘src’. The second assignment will overwrite the first assignment, hence the web browser like Firefox, Opera and Safari will download the TTF file in effect. Since Internet Explorer does not recognize the ‘local’ keyword, which is introduced in CSS3, it will ignore the second assignment and uses the first assigned value, which is the EOT file.

In other word, this solution works because IE does not support CSS3 currently. The ‘local’ keyword simply says, search the font in local PC first, if not found, then download the font from the URL specified. Without the local keyword, web browser will always download the font even if the font exists in the local PC. So, it is always good to specify a value to ‘local’.

Hopefully, IE9 will support TTF / OTF and that will certainly make my life easier.

src: http://symphony-of-dot-net.blogspot.com/2010/03/making-css-custom-font-works-with-ie.html

2 thoughts on “Custom Font in CSS

  1. “Tukang copy paste, tapi bukan tukang palak. Yang jelas saya bersahabat dengan binatang baik yang memiliki KTP atau tidak memiliki KTP.”

    Sebuha kalimat yang sangat bermakna dan memberi masukan pada blogger2 yang sok Anti No-KOPAS!!!!

    Gw dukung berok!!!!! KOPAS bukan kejahatan, MENIRU bukan PEMBUNUHAN.
    Hal ini lebih bersahabat dan berani!!!! dan bukan juga untuk membunuh kreativitas!!

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s