Using Custom Fonts in CSS

There are many browsers under different platforms that one can use to connect to the Internet. In order to make a web application compatible with all platforms, one is limited to only use common techniques that are supported by all clients.

Fonts are one of the properties that vary in different operating systems. In order to dictate a client to use a certain font, you can use the following method:

@font-face {
font-family: Bellerose;
     src: url(path-to-your-special-font/Bellerose.ttf);
}

p {
     font-family: Bellerose;
}

Using @font-face you can describe the properties of your desired font. font-family lets you define a custom name for your fonts, while src is the source of your font.

Note that, clients have to download this font in order to display elements whose font-family properties are assigned to this custom font. Depending on the size of the font, your page load will slow down, however, it is a perfect way of replacing images in menus and logos.

Published On: Dec. 7, 2010 --- Views: 5038

Tags: css font family face

If you found this article helpful, I strongly recommend reading this article:

How to work with tabs in vim

---

There are 2 comment(s):

---

Back To The Blog Page