Tobi Tobi - 6 months ago 13
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

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

Comments