0

I'm building a web site and want to use a fancy, non-standard font. So I got hold of the .ttf and ran it through a web-based converter to generate a (smaller) .woff2 file.

They also provided a small page to test html, css and font. (I modified it a little bit, turned it into an .aspx and got it to pump out the server time, just so I could be sure it was refreshing itself.

The upshot is that when I preview this file locally (I use Visual Studio 2017) everything works fine. I then FTP the .aspx, the .css and the .woff2 files up to a (remote) test server (in exactly the same locations as in development), and the font does not display.

So my question is, what is different between the local and remote sites, such that the local site will properly display the page, but the remote one won't?

The browser happens to be Firefox Quantum v58, but I'm not sure that makes much difference because, locally, everything works. I can appreciate that there may be a difference between local and remote in terms of security settings, but I am doing these tests with my firewall (Zonealarm) turned off.

Some snippets:

/* font converted using font-converter.net. thank you! */
@font-face {
    font-family: 'ad';
    src: url('Fonts/ActionDisplay.woff2') format('woff2');
}

<html>
    <head>
        <title>You converted a font!</title>
        
        <link rel="stylesheet" href="stroke.css" type="text/css" media="all" />
        
        <style>
            .thankyou, .notes {
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 16px;
            }

            .sample {
                font-family: 'ad', Courier;
                font-size: 24px;
                border: 1px solid #ddd;
                display: inline-block;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <p class="thankyou">
            Thank you for using <a href="http://www.font-converter.net">font-converter.net</a>!<br />
            We really appreciate you for using our little service. We hope we can help you with our services again soon.
            <br /><br />
            And there it is, your lovely converted web font:
        </p>

        <p class="sample">
            The quick brown fox jumps over the lazy dog
        </p>

        <p class="notes">
            <b>CSS Stylesheet:</b> You'll find the stylesheet in this folder (if selected). The file is called <code>style.css</code><br />
            <b>web fonts:</b> You'll find all converted fonts in a subdirectory called <code>fonts</code> in this folger<br />
            <% Response.Write(DateTime.Now.AddHours(8)) %>
        </p>
    </body>
</html>

and the working page:

local

PeteH
  • 2,394
  • 1
  • 20
  • 29
  • 1
    What does the network tab of your dev tools say? Are the fonts loaded? One difference might be the remote server delivering the wrong mime-type. – connexo Feb 17 '18 at 12:35
  • Hitherto I never even realised that Firefox had something called Dev Tools, my background is not web development for a very long time. But no, the font is not loaded. – PeteH Feb 17 '18 at 12:45
  • So what do you find in the network tab? No `404 not found` messages? Neither in the console tab? – connexo Feb 17 '18 at 12:48
  • Fascinating. The browser is attempting to load all three files, but is getting a 404 on the font file – PeteH Feb 17 '18 at 12:49
  • Then the path is incorrect. Be aware that servers usally have case-sensitive file systems. So you can have two directories `fonts` and `Fonts` residing peacefully next to each other. Same ofc is true for file names. Windows does not have a case sensitive file system (which sucks). – connexo Feb 17 '18 at 12:50
  • Browser thinks the font file is html so will see if there's a specific mime type for a font. The font appears in the css exactly as it appears in the server's folder structure, same case etc. I'd expect that to be a Windows box running IIS (but don't know). Certainly something which supports .net 4.5 – PeteH Feb 17 '18 at 12:58
  • https://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts – connexo Feb 17 '18 at 13:00
  • yep. font/woff2 – PeteH Feb 17 '18 at 13:02
  • So it works now? – connexo Feb 17 '18 at 13:03
  • yes. Thank you for your help. If you wanna post one of these comments as an answer I'll mark it accordingly. – PeteH Feb 17 '18 at 13:08

1 Answers1

1

What does the network tab of your dev tools say? Are the fonts loading?

One difference between your lecal dev server and the remote server might be the remote server delivering the wrong mime-type (needs to be font/woff2).

If you find a 404, then the path is incorrect. Be aware that webservers usually have case-sensitive file systems. So you can have two directories fonts and Fonts residing peacefully next to each other. Same ofc is true for file names. Windows does not have a case sensitive file system (which is one of many things that suck about Windows).

connexo
  • 53,704
  • 14
  • 91
  • 128