How can I use custom fonts on a website?

Question

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?

There are several old questions around the topic. Some of them are dated, but time is spent more productively in improving the answers than giving short answers to duplicates. (Any really short answer to the question tends to be wrong or essentially incomplete.) — Jukka K. Korpela, Nov 27 '12 at 13:31

score 108 · Answer 1 · answered Nov 27 '12 at 13:26

108

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 */
}

answered Nov 27 '12 at 13:26

Zencode.dk

1,354
1
7
12

11

+1 for the IE comment – Steve Lorimer May 14 '14 at 23:02
1

it seems to work with `src: url('Thonburi-Bold.otf')`, too – steven Oct 02 '14 at 18:48

score 12 · Answer 2 · answered Nov 27 '12 at 13:25

12

You can use CSS3 font-face or webfonts

@font-face usage

@font-face {
   font-family: Delicious; 
   src: url('Delicious-Roman.otf');
}

webfonts

take a look at Google Webfonts, http://www.google.com/webfonts

answered Nov 27 '12 at 13:25

Muthu Kumaran

16,579
5
43
69

score 8 · Answer 3 · answered Nov 27 '12 at 13:25

CSS lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say myfont.ttf, and upload it to your remote server where your blog or website is hosted.

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

score 8 · Answer 4 · edited Feb 27 '15 at 04:38

8

Yes, there is a way. Its called custom fonts in CSS.Your CSS needs to be modified, and you need to upload those fonts to your website.

The CSS required for this is:

@font-face {
     font-family: Thonburi-Bold;
     src: url('pathway/Thonburi-Bold.otf'); 
}

edited Feb 27 '15 at 04:38

skrrgwasme

8,245
11
47
71

answered Nov 27 '12 at 13:26

Dorvalla

4,258
3
22
40

score 1 · Answer 5 · answered Nov 27 '12 at 13:25

First, you gotta put your font as either a .otf or .ttf somewhere on your server.

Then use CSS to declare the new font family like this:

@font-face {
    font-family: MyFont;
    src: url('pathway/myfont.otf'); 
    }

If you link your document to the CSS file that you declared your font family in, you can use that font just like any other font.

How can I use custom fonts on a website?

5 Answers5

Linked

Related