How to add some non-standard font to a website? [html]


You can add some fonts via Google Web Fonts.

Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).

For example:

In the <head> section:

 <link href='' rel='stylesheet' type='text/css'>

Then in CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.


Is there a way to add some custom font on website without using images, Flash or some other graphics?

For example, I was working on some wedding website, and I was finding a lot of nice fonts for that subject, but I can't find the right way to add that font on the server, and how do I include that font with CSS into the HTML? Is this possible to do without graphics?

Using downloaded font offline

Add this at the top of your CSS document.

@font-face {
    font-family: Calli;
    src: url('../fonts/Calligraffitti/Calligraffitti-Regular.ttf');

You can then use it like this:

.page-header {
    font-family: Calli;

.my-font{ font-family: font name; }

this is the css code.

How could i use a specific font for my web site

You'll need to use downloadable fonts which are described in this AListApart article (scroll down to the part titled "Web Fonts: the code you'll use"). But be careful. Browser support is still spotty so you'll want to provide a web safe default font for backwards compatibility.

First download the specific font in net and past into your project folder.

For css, use this link: