@font-face is not working on Chrome, Firefox, IE

Question

This is my CSS code:

The font is not working. Did I miss something?

I want to mention that it's not installed on the local OS and I'm sure that the URL goes to the font exactly

@font-face {
    font-family: 'ma';
    src: url('http://localhost/header/images/FS_Old.ttf');
}

.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'ma';
}

Localhost will be the issue, check Chrome Error Console and see what the error is. — Ryan McDonough, Mar 25 '13 at 14:49
@MajedDH Did you check on safari? To open Chrome Console just right click and choose inspect element then navigate to the console tag — Eli, Mar 25 '13 at 15:00
Why *should* a font work from localhost? On your own computer, you can simply install the font. For network use, you will need a network-accessible HTTP server, so why not skip the issues with localhost and focus on the real problem you will face? That is, to upload the page and the font on a web server. Especially since this lets you post a live URL that others can test. — Jukka K. Korpela, Mar 25 '13 at 15:05
@JukkaK.Korpela because i want to uplode the whole site on an online host so i test it on a local server (using wampserver) — Majed DH, Mar 25 '13 at 15:09
thanks @RyanMcDonough , now the big problem , i've tried alot and no external font worked on firefox — Majed DH, Mar 25 '13 at 15:22
Firefox won't allow you to reference fonts from an external domain, only locally. Check out: http://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox — Ryan McDonough, Mar 25 '13 at 15:38

score 3 · Accepted Answer · answered Mar 25 '13 at 15:09

3

Ryan is right. I replaced your URL with a working URL and it works absolutely fine. This is what I used.

    @font-face {
    font-family: 'ma';
    src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf');
}


.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'ma';
}

answered Mar 25 '13 at 15:09

Rohit Deshmukh

381
2
8
21

Check out: http://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox you will need to implement that on your server if you are referencing the font from another server that isn't your own/ – Ryan McDonough Mar 25 '13 at 15:38
If this is the accepted answer, then the real question was different than what was actually asked. – Jukka K. Korpela Mar 25 '13 at 21:11

score 2 · Answer 2 · answered Mar 25 '13 at 15:10

It should probably because Chrome, Firefox ,IE does not support ttf extension. You can try to put other extension:

@font-face {
   font-family: 'ma';
   src: url('FS_Old.eot'); /* IE9 Compat Modes */
   src: url('FS_Old.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('FS_Old.ttf.woff') format('woff'), /* Modern Browsers */
        url('FS_Old.ttf.ttf')  format('truetype'), /* Safari, Android, iOS */
}

score 1 · Answer 3 · answered Mar 25 '13 at 15:55

I used this website to convert the font to other types http://www.fontsquirrel.com/tools/webfont-generator and used a different supported font type and that seems to have solved the problem. Here is new code that works with all browsers.

<html>
<head>
<style>


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

}

    .menu_head {
        width: 100%;
        position: relative;
        height: 30px;
        font-family: baroque_scriptregular;
    }
</style>
</head>
<body>
<div class="menu_head" >

    hellod
    </div>
</body>

@font-face is not working on Chrome, Firefox, IE

3 Answers3