Custom Fonts Not Showing

  • I have been trying to load custom fonts on my website and nothing seems to be working properly. I have the fonts manually installed on my website in several different font types: EOT, WOFF, WOFF2, TTF, and SVG.

    Some of them appear as they should and some of them don’t. I noticed that more fonts appear properly on Windows than Mac.

    On Mac and iOS devices, I can tell the font is changing to the sans serif default I have set, but the custom font that I want to be showing does not show.

    When I look into Inspect Element I find the following errors:

    I’ve checked the paths to my font files and it looked like that may have been causing an issue. I fixed this but the issue still remains. I’m not sure what the issue could be. I don’t know if it’s issue with the CSS or the font files themselves or something else.

    These are the error message I’m receiving when I open up Inspect Element:

    Failed to load resource: the server responded with a status of 404 (Not Found)
    proximanova-regular-webfont.woff:1

    Failed to load resource: the server responded with a status of 404 (Not Found) ProximaNova-Regular.woff2:1

    Failed to load resource: the server responded with a status of 404 (Not Found) ProximaNova-Regular.ttf:1

    Any insight would be greatly appreciated!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Siddy

    (@sidharthuseagility)

    Hi @pemtfq ,

    You Have to check in incognito mode of browser. Sometimes Browser store the caches. It will auto delete. I think that is browser cache problem Or you can flush the cache of browser. If you will face same problem please let me know.

    Thanks,
    Sid

    Thread Starter pemtfq

    (@pemtfq)

    @sidharthuseagility

    I cleared my cache and checked incognito mode on both my Macbook and Windows laptops. Windows looks slightly better but the Mac is still the same. Yet the Inspect Element errors are gone now, which is good I guess, but I still wish the right font was showing.

    Could it be an issue with the file itself?

    Siddy

    (@sidharthuseagility)

    Might be Can you please do one thing you can add by CDN. That will help to inspect. Please follow those steps.

    To embed a font in a page, use the standard <link> tag in the HTML head, e.g:

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    The font will be downloaded and processed in parallel with your own stylesheet.

    Alternatively, a CSS @import can be used:

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    but this blocks processing of further stylesheets until the font styles have been parsed.

    The web font can then be set in any CSS declaration, e.g:

    body {
  font-family: "Open Sans", sans-serif;
}

    You will get Fonts CDN link on google. It will help to test to your font files.

    • This reply was modified 4 years, 5 months ago by Siddy.
    Thread Starter pemtfq

    (@pemtfq)

    That would be a good solution to try. I haven’t tried that before. I heard it mentioned previously but my custom font is not accessible through Google Fonts. I will try to find another font CDN link for it by doing some research. Thanks. Will report back if this solves the issue.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom Fonts Not Showing’ is closed to new replies.