Anybody successful with @fontsource?

help
1

Has anybody successfully used the npm package provided by @fontsource to import fonts in Meteor?

It’s not working for me, and I assume it’s because isobuild isn’t doing anything smart with the font files.

Basically fontsource provides a bunch of fontname.css files with url properties referencing ‘./files/fontname.woff’ eg https://github.com/fontsource/fontsource/blob/main/packages/abeezee/400.css#L7, and at runtime my application is deeply confused as it hunts for something at /files/fontname.woff.

Does anybody know how this works in something like webpack? Because nobody else on the internet seems to be having a problem with @fontsource. Does it parse the css, bundle the referenced font files somewhere and then change the path for the referenced files?

2

Hi @mrlowe. Does this thread answer your question: How to include fonts in 2021? (without CDN)?

4

No, but thank you. I did read that post before I added mine.

Yes, we can manually copy the fonts, or manually copy the fonts and referencing css, or script all that copying ourselves, but the point of the npm module is to make that unnecessary. So I’m trying to understand why other build systems can just consume fontsource and Meteor’s can’t. (Partly so I feel like I know the “right way” of solving this problem, and can understand what’s going on when I encounter this problem in the future.)

5

OK. I think I gave up on that approach after some research. I could not make it work. If you can make it work, I would be very interested in the solution.

6

Thank you for your suggestion! If I find a solution I’ll be sure and post it here.

7

After a little more research, I found that fontsource does not work with meteor because a css import from a node module is just a call to addStyles(), which dumps the css blindly into a <style> element in the head.

And apparently it does work with webpack because the webpack css-loader “interprets @import and url() like import/require() and will resolve them.”.

So the best solution for Meteor going forward is probably to modify addStyles() to resolve url() references from those modules. I’ll create a PR if I get motivated to do it myself. :grin:

2 Likes
8

It’s not the most elegant solution but linking public with files works: Using npm Packages | Meteor Guide

Reproduction:

meteor npm install --save @fontsource/oldenburg
mkdir -p public # -p in case you already have public as f
cd public
ln -s ../node_modules/@fontsource/oldenburg/files ./files

then import in main.js:

import '@fontsource/oldenburg'

and main.css:

body,p,h1,h2 {
  font-family: "Oldenburg", monospace;
}

You can create a shellscript to automate this, since all @fontsource packages follow this structure.

Note: I used “Oldeburg” and monospace to better see, whether it has been applied or not.

Edit: I know this is still some kind of manually but if you really want this autmatically to be resolved I think you need to write an isobuild package that compiles css and takes care of any linked fonts by auto-linking it to the public folder in the build package output.

9

Yes, but this solution is not working on custom fonts… :frowning:

10

Can you describe a bit more what this is about custom fonts? I thoght fontsource has all required fonts in the respective packages?

11

Hi @jkuester I had to use the TT Hoves font (https://typetype.org/fonts/tt-hoves/) on one of my project, which is not available in fontsource. Fontsource is great, but I think, that still must exists way to use custom fonts. Only what was working for me was copy fonts into the public folder and set path to public folder in scss files.

BUT: what was bigger problem, it was KendoUI (110+ jQuery Widgets - A Complete jQuery Components Library | Kendo UI), which is using own symbol font and fontface is placed in kendo’s CSS. …and I had to found the solution, how to override the kendo’s fontface CSS by my own CSS with changed font path (kendo font I was also coppied into public folder, override the css fontface and change font paths into public folder).