@font-face doesn't work

I put the ttf file on the server and used the following code in CSS

@font-face {  
   font-family: "fontname";  
   src: url("http://www.mywebsite.com/Fonts/fontname.ttf")

body {
  font-family: "fontname", sans-serif;

In the html file I wrote:

<!doctype html>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cssfile.css">

I tried different ttf files but none of them worked. Does anyone know why? Thanks.

What browser are you viewing this in?

You need multiple types of fonts for cross browser support. You might not be viewing this page in a browser/system that uses ttf.

Firefox 39.0 and IE 11

Please follow the guide from my previous post. Look at their examples.

It seems that the browsers support the font because if I put the font files in the same directory with the HTML file on the computer, the font shows up. The problem arises when the local HTML file tries to access the font stored on the server.

The real question is what happens when both the file and the fonts are on the server. But you can’t afford to ignore the link @RyanReese posted above, because a single .ttf file won’t cut it for @font-face.

It works fine when they are both on the server too. The only problem is when the file tries to get the font from the server.

Font-face is subject to cross-domain rules and some browsers will only allow access to the font-files when the request comes from the same domain.

You need your files uploaded to the server to work properly or keep versions locally.

There are fixes for the cross-domain issue but require digging into the servers htaccess files.

As others have already said you need the full pack of font-face rules to work cross browser anyway so upload your font to font-squirrel and it will generate all the files you need.

1 Like

Thanks, Paul. I think that should be the problem.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.