How to include your own web fonts #813

maguijo · 2022-10-10T16:43:09Z

maguijo
Oct 10, 2022

I figured this out today, and wanted to share. I don't think I'm very good at explaining things so feel free to ask for clarification!

I made a folder inside the assets directory called fonts.
Put my woff and woff2 files in the fonts folder.
Added a css file inside css > src called _fonts.css, and put all my @font-face rules in that css file. Note that the url for the src of the font family is "../fonts/[fontname].woff2". At first I thought it should be ../../ because the _fonts.css file is 2 levels below the fonts directory right? But the global.css file it compiles to is only one level below the fonts folder so you only need to go up one level in the relative path notation.
Edited the global.css file to import the _fonts.css file
Edited the config file and added the line "assets/fonts/*.{woff,woff2}", to the filesToCopy array
Edited the constants.js file in the gulp folder, adding the path to the fonts folder to the paths constant, like this:
, fonts: { src: ${ assetsDir }/fonts/*.{woff,woff2}, dest: ${ assetsDir }/fonts/, }

And it works! I can now use my font in the _custom-properties.css to define the global-font-family and the highlight-font-family variables.