Embed font in webpage

Question

Ive googled alot trying to figure out how to embed fonts on a webpage. As i understand it you should upload the fonts to your webpage in .ttf and .eot formats. and the use @font-face in a stylesheet. I have placed the Kingthings_Italique.eot and Kingthings_Italique.ttf in the root of my webpage. Createt a stylesheet like this. ``` .MyStyle { /* For IE */ @font-face { font-family: 'Kingthings Italique'; src: url('Kingthings_Italique.eot'); } /* For Other Browsers */ @font-face { font-family: 'Kingthings Italique'; src: local('Kingthings Italique Regular'), local('KingthingsItalique-Regular'), url('Kingthings_Italique.ttf') format('truetype'); } } ``` First i refer to it like this ``` ``` And the i try to use it like this ``` ``` But no matter if i use ie8 or chrome2 the font isnt changed…

Accepted Answer

In order for the embedded font feature to work (in browsers supporting it) you've also got to apply the new font-family to a style selector.

For instance

```
h1 { 
  @font-face {
 font-family: CustomFont;
 src: url('CustomFont.ttf');
  }
}
```

won't do the trick, even though it will indeed load a font (if it's a valid URL) -- because all we've done is load the font. We still need to actually apply it, so

```
@font-face {
  font-family: CustomFont;
  src: url('CustomFont.ttf');
}

h1 {
  font-family: CustomFont;
} 
```

both loads the custom font and applies it to your CSS selector (in this example, h1).

You'll almost certainly want to read a tutorial about @font-face (Krule has already suggested a good one above with links to free fonts which can be used with it.) Ditto to all the warnings above about graceful degeneration, as this is still not a universally supported feature.

Embed font in webpage

Solution

Problem