Custom font won't load onto site

I have looked through all of the posts on here and I don’t know why but my website won’t load with custom fonts.

I am using PaperMod, and I have this in my own theme variables CSS overriding the original

    font-family: 'Avara_Bold';
    src:    url('fonts/Bold/Avara-Bold_web.eot');
    src:    url('fonts/Bold/Avara-Bold_web.eot?#iefix') format('embedded-opentype'),
            url('fonts/Bold/Avara-Bold_web.woff') format('woff'),
            url('fonts/Bold/Avara-Bold_web.woff2') format('woff2'),
            url('fonts/Bold/Avara-Bold_web.ttf') format('truetype'),
            url('fonts/Bold/Avara-Bold_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

In my config, I have baseURL = "http://michaelacheong.com/"

My fonts are stored in \static\fonts\. There are three but I am only trying to get Avara Black working.

I should note I started modifying the PaperMod theme files before learning that you should copy them over and override them so there could be an issue there.

My repo: GitHub - vitamickey/digital-garden: A place to grow (in Christ)
The actual page repo on GitHub: GitHub - vitamickey/vitamickey.github.io: it is a site.

Any help is appreciated

I think the url should be /fonts/...

Hi,

I am not sure what is the default settings of your theme but I understood that the Avara font is not part of the theme itself?

If so, then you edited the .css files located in the /themes/ folder.

The best way to override default .css files is to copy that file into your own project’s /layout/ folder.

For example, in your case:

  1. Copy /themes/PaperMod/assets/css/core/theme-vars.css

  2. To /assets/css/core/theme-vars.css

From what I can gather, your theme is not loading your own .css located at /assets/css/extended/theme-vars.css because the path is not part of the theme itself.

This is why your override of /theme-vars.css is not working.

Secondly, the font files itself doesn’t have the _web suffix but in your theme-vars.css file it has.

Third, while after making the relevant changes mentioned above, your theme is still loading from /assets/css/fonts/Bold/. I’m not sure where it is coming from, I did not take a deeper look into it but you may want to find that one. This is optional but still …

Regardless, make the changed earlier and your font will load.

You can check the errors by loading the browser dev tool which is F12 in both Firefox, Chrome, and Edge browsers. In the “console” tab, you’ll see the 404 errors related to the font loading.

I advise you clone the theme afresh and start from scratch by copying the files you need to modify to the base ./layouts folder. Try changing fonts/ to /fonts/.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.