Tobi Tobi - 1 year ago 80
CSS Question

Does anyone know how to embed ttf fonts in website

I'm trying to embed a ttf font called 'Bebas', but so far have been unsuccessful.

The ttf file is hosted on my server at http://www.monthly.square7.net/bebas/bebas.ttf

I have been trying to embed it like this:

<div style="font-family: bebas; src: url( monthly.square7.ch/bebas/bebas.ttf ) format( truetype );"> Bebas font test </div>


I have been trying for ages now but it is not working.

I don't want to use a stylesheet because then I would have to embed that stylesheet into my page, I would prefer to use inline CSS.

I managed to get the font working a few days ago but I edited the html and this happend.

The site is monthly.co.vu

Answer Source

You've incorrectly declared the font. The way you've tried to do it inline wont work as you've simply referenced a font and then added a random src attribute after. Here's how you can add a font declaration to the style tag:

<style>
...
@font-face {
    font-family: bebas; /* font name */
    src: url("monthly.square7.ch/bebas/bebas.ttf"); /* font location */
}
</style>

What you can do now reference the font using the font name you allocated "bebas" either in the style-sheet or inline as:

<style>
...
@font-face {
    font-family: bebas; /* font name */
    src: url("monthly.square7.ch/bebas/bebas.ttf"); /* font location */
}
div {
    font-family: bebas;
}
</style>

or

<div style="font-family: bebas"> Bebas font test </div>

respectively.

It looks like you had the correct code but incorrectly tried to apply it inline, copying the contents of the "@font-face" into the style attribute of the element.

Read more here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp