Using a custom font with CSS

Question

I am attempting to get a custom font.

When I try, the font doesn't work and it uses custom Times new Roman.

This is my code in the style sheet:

@font-face {
    font-family: "ARBONNIE";
    src: url(Custom/ARBONNIE.ttf);
}
font {
    font-family: "ARBONNIE";
}

But, when I view the website, the custom font is not shown.
It's the correct directory and everything. Please help :(

Answer 1

Your use of @font-face is not compatible with all browsers. A useful tool for generating cross-browser @font-face code is here: Font Squirrel @font-face Generator. That generator will give you all of the files you need as well as a complete example that you can use to test in various browsers.

Ultimately on your page, your CSS will look something like this:

@font-face {
    font-family: 'BitstreamVeraSerifBold';
    src: url('verasebd-webfont.eot');
    src: url('verasebd-webfont.eot?#iefix') format('embedded-opentype'),
         url('verasebd-webfont.woff') format('woff'),
         url('verasebd-webfont.ttf') format('truetype'),
         url('verasebd-webfont.svg#BitstreamVeraSerifBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.custom-font {
    font-family: 'BitstreamVeraSerifBold';
}

Note that I'm using the font BitstreamVeraSerifBold here, with the font files in the same directory as the CSS file.

And in your HTML:

<span class="custom-font">Your text here</span>