Search code examples
cssfontsfont-facewebfonts

@font-face doesn't seem to be displayed, although it is being downloaded

Here's a website I'm working on: https://wolfies-whisky-ltd.myshopify.com (password: shooting)

I've used @font-face to load fonts that are being displayed fine - the RightGrotesk family. (I'm planning to add the WOFF & WOFF2 font files later, but as it's working for now, leaving it as it is.)

@font-face {
    font-family: "RightGrotesk-CompactBlack";
    src: url("{{ 'RightGrotesk-CompactBlack.otf' | asset_url }}") format("opentype");
}

I'm using the exact same @font-face declaration for the body family, Modern Typewriter, but this one doesn't display. So, I've added all the possible formats.

/* Font declaration */
@font-face {
    font-family: "Modern Typewriter";
    src: local('Modern Typewriter'), url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.eot?v=1694793617'); /* IE9 Compat Modes */
    src: local('Modern Typewriter'), url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.eot?v=1694793617?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/ModernTypewriter.otf?v=1694793617') format('opentype'), /* Super Modern Browsers */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.woff2?v=1694793617') format('woff2'), /* Super Modern Browsers */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.woff?v=1694793617') format('woff'), /* Pretty Modern Browsers */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.ttf?v=1694793617')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

/* The CSS declaration that is taken into account */
body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100%;
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.06rem;
    font-family: "Modern Typewriter", Courier, serif;
    font-style: normal;
    font-weight: normal;
}

I've tried declaring font-style and font-weight, I've tried not declaring them. Using local(), or not. Different font formats, etc.

In the Inspect Element, if I click on the text where the font should appear, you can see it uses the body declaration further above, so it isn't being overwritten by a different class or parent element...

When checking the Network tab in the Inspector tools I can see it has been downloaded fine, status code 200.

enter image description here

So, I'm not really sure why it is not being displayed? At the moment it loads its fallback font, Courier, which means it's also reading the right CSS declaration, not one buried further down in another CSS file.

It does show up if I install the font locally on my computer, but that's not very useful.

Any ideas, please?

Solution

  • It seems it's simply that the original font file (.ttf) is corrupted. Trying to convert it through Font Squirrel it says "The font 'modern_typewriter.ttf' is corrupt and cannot be converted."

    So, there aren't any solutions, except using a different font, or somehow repairing this one, but I have no idea how (I've been looking at FontForge, but it seems like a new world that I'm not ready to explore).