How can I use custom fonts on a website?

html fonts
James Logan picture James Logan · Nov 27, 2012 · Viewed 144.9k times · Source

In order for my website to look good I need to use a custom font, specifically, Thonburi-Bold. The problem is - the font does not get displayed unless the user has installed it. It also isn't displayed in firefox.

Is there a workaround to this problem?

Answer

Zencode.dk picture Zencode.dk · Nov 27, 2012

You have to import the font in your stylesheet like this:

@font-face{
    font-family: "Thonburi-Bold";
    src: url('Thonburi-Bold.ttf'),
    url('Thonburi-Bold.eot'); /* IE */
}

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More
How can I use Google's Roboto font on a website?

I want to use Google's Roboto font on my website and I am following this tutorial: http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 I have downloaded the file which has a folder structure like this: Now I have three questions: I have …

Read More