Hello,
I’m working through the Eleventy course again, this time with a few tweaks for a personal project. I’m wondering if there’s a straightforward way of using local fonts to generate the fonts.css from the src folder, rather than using get-google-fonts?
Thanks for any pointers you can provide.
Chris
Hi Chris!
If you want to use a common font supplied on most operating systems, you just have to specify it within a font-face declaration, no need for the @font-face rules in fonts.css.
If you want to ship the font files yourself as the course does, then although you can get the ttf/otf files from your local system and convert them to woff2/woff for the web, I would suggest against it.
Almost all fonts that will be installed on your local system will have licenses that are fine for use on your computer, but will not cover use on a website.
You need to be very careful with font licenses, this is why Google Fonts is so useful and is used so much; because you can be sure that the fonts are safe for you to use.
Thanks for your reply, much appreciated.
I was really meaning that I wanted to make the fonts.css generation part of the pipeline. I have licensed woffs from https://www.futurefonts.xyz, I was wondering there was a method of dropping them into a src/fonts folder and seeing them come out the other end with an accompanying css file.
I couldn’t track down a way to do this so I just added a pass through copy for them and wrote the CSS myself.
Ah yes, in which case that would be your best bet.
get-google-fonts doesn’t generate the fonts.css file as such, it mostly just downloads the one provided from Google. It would be best to hand-write your @font-face declarations and use either addPassthroughCopy or gulp to simply copy the files over.
Brilliant, good to know that I haven’t missed anything. You’re a gent, Alistair, many thanks for your help.