CODEWITHSUNDEEP
htmlcssfont-face
Seji
Seji

Reputation: 5

Why aren't my fonts working?

My fonts work on chrome, opera and safari but not ie or firefox. I'm having trouble understanding @font-face, even after reading the other questions about it.

@font-face {
font-family: "TikalSansBlack";
src: url("./fonts/TikalSansBlack.eot?");
src: url("./fonts/TikalSansBlack.woff") format("woff"),
    url("./fonts/TikalSansBlack.ttf")  format("truetype"),
    url("./fonts/TikalSansBlack.svg") format("svg")
    url("./fonts/TikalSansBlack.otf") format("opentype");
}

@font-face {
    font-family: 'TikalSansMedium';
    src: url('./fonts/TikalSansMedium.eot?');
    src: url('./fonts/TikalSansMedium.woff') format('woff'),
        url('./fonts/TikalSansMedium.ttf')  format('truetype'),
        url('./fonts/TikalSansMedium.svg') format('svg')
        url('./fonts/TikalSansMedium.otf') format('opentype');
}

@font-face {
    font-family: 'TikalSansThin';
    src: url('./fonts/TikalSansThin.eot?');
    src: url('./fonts/TikalSansThin.woff') format('woff'),
        url('./fonts/TikalSansThin.ttf')  format('truetype'),
        url('./fonts/TikalSansThin.svg') format('svg')
        url('./fonts/TikalSansThin.otf') format('opentype');
}

here's the website I'm working on

Upvotes: 0

Views: 727

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24713

You are missing a comma on the last one of every font

@font-face {
font-family: "TikalSansBlack";
src: url("./fonts/TikalSansBlack.eot?");
src: url("./fonts/TikalSansBlack.woff") format("woff"),
    url("./fonts/TikalSansBlack.ttf")  format("truetype"),
    url("./fonts/TikalSansBlack.svg") format("svg"),  <<== put comma here
    url("./fonts/TikalSansBlack.otf") format("opentype");
}

Also i would be concerned about your file path. If you want to go up a level you need two . not one. Maybe this is what's required throughout

 url("../fonts/TikalSansBlack.otf")

Upvotes: 0

Charles
Charles

Reputation: 1122

Try this, if that doesn't work I would put all of the sources on one line and if that doesn't work then remove the format attribute. (The fix below adds a comma you missed after the .svg which is an issue on all 3 of the @font-face).

  @font-face {
        font-family: 'TikalSansThin';
        src: url('./fonts/TikalSansThin.eot?');
        src: url('./fonts/TikalSansThin.woff') format('woff'),
            url('./fonts/TikalSansThin.ttf')  format('truetype'),
            url('./fonts/TikalSansThin.svg') format('svg'),
            url('./fonts/TikalSansThin.otf') format('opentype');
    }

Upvotes: 1

Related Questions