CSS 3 out of 4 custom fonts don't load

I can't seem to make custom fonts load in Firefox 54.0 and Chromium 59.0.3071.86. Looking at the Network tab in Firefox's element inspection tool, I see no font being loaded/downloaded, same with Chromium.

Here's the relevant CSS: https://hastebin.com/raw/quyivirosa
And here's the HTML: https://hastebin.com/iciwavoyus.xml

I've checked, and the URLs to the fonts are all correct, so I have no idea why it refuses to work. What does work is the font in the navbar, but I'm guessing that one is being loaded locally, since it's installed on my system.

Is there something I've done wrong...? I've searched around, and could not find any solutions to my problem.

1 answer

  • answered 2017-06-17 19:31 Bindrid

    I found two errors in your css that, as soon as I fixed them, the fonts started working.

    I changed

        @font-face {
            font-family: 'DejaVu Condensed'; !important
            src: url('/fonts/DejaVuSansCondensed.eot');
            src: url('/fonts/DejaVuSansCondensed.eot?#iefix') format('embedded-  opentype'),
                url('/fonts/DejaVuSansCondensed.woff2') format('woff2'),
                url('/fonts/DejaVuSansCondensed.woff') format('woff'),;
            font-weight: normal;
            font-style: normal;
        }
    

    to

        @font-face {
            font-family: 'DejaVu Condensed' !important; 
            src: url('/fonts/DejaVuSansCondensed-Bold.eot');
            src: url('/fonts/DejaVuSansCondensed-Bold.eot?#iefix') format('embedded-opentype'),
                    url('/fonts/DejaVuSansCondensed-Bold.woff2') format('woff2'),
                    url('/fonts/DejaVuSansCondensed-Bold.woff') format('woff');
            font-weight: bold;
            font-style: normal;
        }
    

    On line two, !important should be inside the semicolon. On line six, I removed the coma that is right before the semicolon. Once fixed, the font face kicked in