Search code examples
cssfont-facewebfonts

Webfonts: Why aren't my fonts showing?

Fonts were working, but stylesheets were messy and static assets were being served by application server. When I moved the assets to CloudFront, my fonts stop working. I have created a https://jsfiddle.net/Lunhdb62/ to exemplify the issue:

CSS:

@font-face {
    font-family: 'Helvetica Neue Std 35 Thin';
    src: url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Th-cbecc0396d9eccbbeff4a92e06449eb1.woff) format("woff"),
         url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Th-94816ab73b42e623ce8fdd576647dbff.ttf) format("truetype");
}


@font-face {
    font-family: 'Helvetica Neue 75 Bold';
    src: url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Bd-4f24f787ae7577c7b0f8392ae2a62ad6.woff) format("woff"),
         url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Bd-4c5729a69333fbd9dfb4907d8eab440b.ttf) format("truetype");
}

p {
    font-size: 32pt;
    font-family: monospace;
}
p.normal {
    font-family:'Helvetica Neue 35 Thin';
}
p.bold {
    font-family:'Helvetica Neue 75 Bold';
}

HTML:

<p>monospace</p>
<p class="normal">Helvetica Neue Light</p>
<p class="bold">Helvetica Neue Bold</p>

Additional question: Does the 'font-family' I choose in the @font-face declaration matter? Or it can be anything I want?

Solution

  • First off, your font family names differ for your thin font type: Helvetica Neue Std 35 Thin in the declaration and Helvetica Neue 35 Thin for the actual use.

    Second: Your font locations should be inside quotations: 'http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Th-cbecc0396d9eccbbeff4a92e06449eb1.woff'

    And third, you can't @font-face to fonts hosted on a different domain. Browsers won't allow this. You'll have to host the fonts on the same domain and declare your path from there.