[HELP] Fonts not being found 404 error - even though they're in the right place

[mattchaptr]

Hi guys,

Absolutely loving Sage so far. It’s complete changed our development approach and we’re getting some really great results from it.

One thing I’m really struggling with is the loading of fonts. I’ve placed my custom woff files in /resources/assets/fonts and am calling them in a scss file with the below:

@font-face {
font-family: ‘Suisse’;
src: url(’…/fonts/SuisseIntl.woff2’) format(‘woff2’),
url(’…/fonts/SuisseIntl.woff’) format(‘woff’);
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: ‘Suisse’;
src: url(’…/fonts/SuisseIntl-Italic.woff2’) format(‘woff2’),
url(’…/fonts/SuisseIntl-Italic.woff’) format(‘woff’);
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: ‘Suisse’;
src: url(’…/fonts/SuisseIntl-Semibold.woff2’) format(‘woff2’),
url(’…/fonts/SuisseIntl-Semibold.woff’) format(‘woff’);
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: ‘Suisse’;
src: url(’…/fonts/SuisseIntl-SemiboldItalic.woff2’) format(‘woff2’),
url(’…/fonts/SuisseIntl-SemiboldItalic.woff’) format(‘woff’);
font-weight: 600;
font-style: italic;
}

On build they get copied perfectly to the dist dir but the CSS can’t reference them. I just get 404s in the console.

Navigating to them with http://jhg.test/app/themes/john-hansard-gallery/dist/fonts/SuisseIntl-Semibold_c1785c98.woff2 returns a 404 but as soon as I go to them directly using http://localhost/jhg.art/web/app/themes/jonh-hansard-gallery/dist/fonts/SuisseIntl-Semibold_c1785c98.woff2 they download

Wondering if anyone else had a similar problem?

Thanks again!

Matt

[Doocey]

I had a somewhat similar problem in trying to get fonts placed in the dist folder – what I did was create a css variable in /resources/assets/styles/common/_variables.scss and set it’s value to my relative folder path, in my case $font-folder: ‘…/fonts’; then when assigning a font in my other .scss files, I would follow this format:

src: url(“#{$font-folder}/PlayfairDisplay-Bold.woff”) format(“woff”);

Hopefully that might be of some help.