CODEWITHSUNDEEP
htmlcssdrupal-7web
Merciful
Merciful

Reputation: 109

How to use custom font in website

I use this code in style.css file and can add my custom font where I want.

    @font-face {
    font-family: Titr;
    src: url('fonts/L4i_Titr.ttf');
    url('Thonburi-Bold.eot');
}

But this work for localhost. When I put my local website in the web, font don't work. What's problem? What's the solution?

Upvotes: 1

Views: 2044

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10265

Make Sure fonts are uploaded on server and in your question path is wrong for .eot format. Since All latest browser support the .woff font format type. So you can use .ttf and .woff font format type.

Thats work on your local machine because of fonts are available on your system. After uploading the font on server and given a correct file path in CSS file your custom fonts will appear.

As well make sure you define the font MIME Type for all fonts type you are using. For example .woff format set a MIME type in server like application/x-font-woff .

Using @font-face Generator you can convert font format from .ttf to .eot, .svg, .woff.

Update:

On .htaccess file add font the following types:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

CSS

@font-face {
  font-family: 'Titr';
  src: url('fonts/L4i_Titr.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('fonts/L4i_Titr.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Upvotes: 1

user3832769
user3832769

Reputation:

If Kheema Pandey's solution dosen't work then maybe there is something wrong with the font file. And if this is true then the only reson because of which the font is working on localhost is because you already have it installed on your system. So just check the font file for any errors.

EDIT :
Have you tried opening the online page in multiple browsers. If not then try it beacuse it might be possible that a specific browser might not support a font(happened with me).

Upvotes: 0

Related Questions