Including fonts from npm in pkgdown

[boshek]

Hi there,

Is there any way to include a font from npm into a pkgdown site? The pkgdown site is hosted on github so I imagine that I could have a github actions runner that installs it and then accesses via extra.css but I am wondering if there are less clunky ways to do it, particularly since that would involve javascript where I have little to no useful knowledge.

Thanks in advance,

Sam

[maelle]

@boshek!

Could you provide more details on the font files?

I started experimenting with fonts for rotemplate: font test by maelle · Pull Request #65 · ropensci-org/rotemplate · GitHub and actually wondered whether font customization should be better documented in pkgdown Add docs or link to docs of how to specify a non Google font · Issue #1968 · r-lib/pkgdown · GitHub

[boshek]

Wow ok your approach is way more sensible. I took your approach and applied it here: attempt to add BCSans by boshek · Pull Request #291 · bcgov/bcdata · GitHub

[maelle]

I've done some more reading on fonts (and am still not sure I fully understand the topic) and it seems that to load fonts from another domain you need that domain server to set a specific header on the fonts.

• Cross-Origin Resource Sharing (CORS) - HTTP | MDN
• Access-Control-Allow-Origin - HTTP | MDN
• My try Change Access-Control for fonts by maelle · Pull Request #309 · ropensci/roweb3 · GitHub

I think you store your fonts on GitHub, you might want to serve them from somewhere you have more control (or more easily, from the same domain as the website where you want the font).

Take all of this with a pinch of salt as I'm learning at the same time as you.