What is the proper way to include custom fonts in Sage 9?

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:

wp_enqueue_style( 'avenir', get_template_directory_uri() . '/assets/fonts/avenir/stylesheet.css');

1 Like

I created a file called _fonts.scss and added my font-faces there
then imported that file on main.scss like this:

@import "common/fonts";

BTW, the font-face looks like this (look at the paths):

@font-face {
  font-family: 'chicago';
  src:
  url('../fonts/chicagoflf.woff') format('woff'),
  url('../fonts/chicagoflf.woff2')
}
2 Likes

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

Please provide more details. In what way does it not work? Do you see an error? If so, what does the error say? etc…

1 Like

thanks alwaysblank
i am going to do my best ! :wink:

i think it is about the directory.

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’);
}

h1, h2, h3{ font-family:'RidemyBikeSerifEssential' }

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.

sorry i found documentation in the sage book (feb 2018), p.119, but the"../' does not work with my local website.

Try with ../ (two dots).

this is what i did. but there is a bug with this forum. i wrote two dots, and three appear.
But i assure you my code is correct. :wink:

It appears you’ve named your font-face RidemyBikeSerifEssential-Bold and then called it using RidemyBikeSerifEssential. Try making these the same.

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.

1 Like

ok this is about my localhost parameters.
It helps me anyway, thank you for your help :wink: