Add docs or link to docs of how to specify a non Google font

[maelle]

(in the Customize article)

[maelle]

• what font "files" does one need.
• how to indicate their usage in the pkgdown config.

I haven't found a good example in the sass docs.

[hadley]

Docs at https://rstudio.github.io/sass/reference/font_face.html

[maelle]

In rotemplate what worked:

• Only mentioning the font face in the pkgdown config https://github.com/ropensci-org/rotemplate/blob/3ac30a939a3aab97c3ca78c7e1d4672952b6ef45/inst/pkgdown/_pkgdown.yml#L22
• Adding scss rules https://github.com/ropensci-org/rotemplate/blob/985ffb56006476015b4027b20b518fead9c37840/inst/pkgdown/extra.scss#L189-L200= (in a way I think it was more natural anyway as I was copy-pasting from another (s)css file) + making sure it was possible to load the fonts from another website https://github.com/ropensci/roweb3/blob/9a4ad99d8217cd750e796cd8291cdd00dd14c25c/netlify.toml#L24-L28

From the docs linked in https://github.com/r-lib/pkgdown/issues/1968#issuecomment-1142673268 I imagine one could use the src field?

[EllaKaye]

Hello. I have a variation on this question. How can I use local font files in a pkgdown site? Combining guidance from the customise your site vignette and what worked for @maelle, I have tried the following:

In extra.scss:

@font-face {
  font-family: 'LEMONMILKPro-Light';
  src: local('LEMONMILKPro-Light'), url('fonts/LEMONMILKPro-Light.woff2') format('woff2'), url('fonts/LEMONMILKPro-Light.woff') format('woff');
}

In _pgkdown.yml:

template:
  bootstrap: 5
  bslib:
    base_font: "LEMONMILKPro-Light, sans-serif"

I put the font files in pkgdown/assets/fonts and can see that they've been copied (via build_site()) into docs/fonts.

However, the fonts aren't showing either on the local preview (via build_home_index(); init_site(), nor on the site deployed via the GHA that comes with use_pkgdown_github_pages(). They do, however, show when I run servr::httd() in the project then navigate to docs.

When I inspect a text element in the browser, I see the error message:

Not allowed to load local resource: file ///path/to/package/docs/deps/bootstrap-5.2.2/fonts/LEMONMILKPro-Light.woff2

When I check the folder docs/deps/brootstrap-5.2.2 there is indeed no fonts directory within it.

Since this (and other fonts I want to use) are paid-for, I ideally prefer a solution that doesn't involve me hosting them online in a way that others can download for their own use.

Is there somewhere I can save the font files locally so pkgdown can use them and they appear on the version deployed by the GHA?

[hadley]

@EllaKaye as far as I know, there's no way to host them online in such a way that they're used for your website, but no one can download them.

[EllaKaye]

Oh, OK. Thanks @hadley.