I’m a little confused about how custom fonts work into the Sage 9 workflow. I ended up including my font this way, but I’m pretty sure this is not correct:
hello people tahnk you for your help.
I did like @kilinkis but it does not work. I am a bit lost, i suppose it is about the directory. Where could we get a complete tutorial about @font-face ?
thanks
My folder for the fonts is “ressources/assets/fonts/…”
(With “yarn build”, it becomes “dist/fonts/…”)
i import the “_ressources/assets/styles/common/fonts.scss” partial stylesheet in the “ressources/assets/styles/main.scss” main stylesheet.
and this is my code of _fonts.scss : @font-face {
font-family: ‘RidemyBikeSerifEssential-Bold’;
src: url(’…/fonts/3794EF_1_0.eot’);
src: url(’…/fonts/3794EF_1_0.eot?#iefix’) format(‘embedded-opentype’),url(’…/fonts/3794EF_1_0.woff2’) format(‘woff2’),url(’…/fonts/3794EF_1_0.woff’) format(‘woff’),url(’…/fonts/3794EF_1_0.ttf’) format(‘truetype’);
}
BUT IT DOES NOT WORK.
The compilation is ok. Nothing wrong but I think it is because of the directory is false. I could write “dist/fonts/…” but this is not the best way to do.
Do you have any idea ? i would love to find a tuto about it in the official documentation of sage.
thanks in advance for your help.
thank you @MWdelaney,
yes that was a mistake but my font is still not found. Look at this : Access to Font at 'http://localhost:3000/guillaumedeschamps/app/themes/sage/dist/fonts/3794EF_1_0.woff2' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
This is an issue with your browser’s policy for loading assets from localhost. Try running yarn build and loading your site from its development URL rather than localhost.
Unfortunately we don’t have any control over your browser’s security policies.