Local fonts not loading

thedivtagguy commented 3 years ago

Hi! First of all, thank you for a great project. I use your starter for all of my websites and I'm grateful to you for making it so easy to get started!

For my current project, I wanted to load some fonts I had bought and downloaded. I've tried all possible ways but the site just won't load them. My process has been as follows:

I have added a new folder called fonts in my root directory, which is from where Hugo reads my static files.
I have added the following CSS in the site.css file (which is here)

@font-face {
    font-family: 'Causten';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/Causten-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Causten';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/Causten-SemiBold.woff2) format('woff2');
}

@font-face {
    font-family: 'Causten';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/Causten-SemiBoldOblique.woff2) format('woff2');
}

@font-face {
    font-family: 'Causten';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/Causten-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Causten';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/Causten-BoldOblique.woff2) format('woff2');
}

@font-face {
    font-family: 'Causten';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/fonts/Causten-ExtraBold.otf) format('opentype');
}

@font-face {
    font-family: 'Causten';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(/fonts/Causten-ExtraBoldOblique.woff2) format('woff2');
}

For the purposes of trial, I've included some fonts in the woff2 and otf format.

This is what my tailwind.config.js looks like (you can find it here):

module.exports = {
    theme: {
        extend: {
            colors: {
                'orange-400': '#F85E00',
                'orange-300': '#E86E23',
                'orange-600': '#AB511A',
                'orange-200': '#FC914E',
                'biga': '#455434'
            },       
            fontFamily: {
                'causten': ['Causten'],
            }
        }

    },
    variants: {},
    plugins: [
        require('@tailwindcss/typography'),
    ],
    darkMode: "class",
    // ...
    plugins: [require("nightwind")]
}

However, when I try loading something like this:

<div class="bg-gray-200 flex justify-center items-center" style="height: 70vh;">
    <div class="m-auto">
        <h1 class="font-causten font-black">This is a text</h1>
    </div>
</div>

My font files aren't being loaded. How can I fix this?

My repo is here: https://github.com/thedivtagguy/website-source/

dirkolbrich commented 3 years ago

Hugo reads your static files from the /static folder. Try to move your font files under /static/fonts within your root folder. This will result in a location of /public/fonts after building the site.

thedivtagguy commented 3 years ago

Thank you, that works perfectly! I should have realized this earlier.

dirkolbrich / hugo-tailwindcss-starter-theme

Local fonts not loading #39