Breadcrumbs

[mikethedj4]

Custom fonts have been used on the web before CSS3 came out, but what we had to do was apply it in an image. We'll that time is gone now. We can add it right into our styling in CSS, and you've probably seen me do this already with the JavaScript Calculator, as well as NoteTaker.

So lets begin shall we?

NOTE: I'll be using the English font as an example.

First define your font, by giving it a name, and then grab the font url. (Caps matter)

Code: Select all

@font-face {
font-family:English;
src:url('fonts/English.ttf');}

Now that you've defined the font, whatever name you used you'd use that name to apply that custom font family in CSS3.

Here's a small example.

Code: Select all

div#example {
font-family:ThinTxt;
font-size:40px;
color:silver;}

[Dummy1912]

wow cool
thanks for sharing didn't know that

[Codex]

Or you could use Google Web Fonts:
http://www.google.com/webfonts#ChoosePlace:select

[mikethedj4]

Thanks for the tip Codex. However I still recommend my tip from above, as it'll make the page load faster, and you're not hyperlinking as the font should be on your hosting account.

[Danny]

thanks for sharing!