🏠 back to Observable

Embedding Fonts into SVG

Help
#1

I am working on a notebook with a custom font. I link the font externally and use the “addWebFont” function in this notebook. On most devices, the font loads correctly. But sometimes the fonts don’t load when people open it. Does anyone have any idea why this is happening?

I use the “Acumin Pro” font with the following code:

    const svg = d3
        .create("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("viewBox", [0, 0, width, height])
        .call(
          addWebFont,
          'Acumin Pro',
          'https://observable-cors.glitch.me/https://gist.github.com/coindesk-research/2bf8eddda40303351c9f02f73b661cca/raw/2aa621a1be6cc12cc572fd390027839254b166a3/Acumin-RPro.otf',
          'opentype'
        )
#2

Hi @haoshuai do you have an example when it is not working?
Can you try on these devices without using the cors-proxy? my guess is that this could be the issue

thanks

1 Like
#3

Glitch instances have both a startup time and a rate limit. It’s possible that you’ve met either one or the other.

If it’s the rate limit, then I’d recommend to fork the project and use your own CORS proxy instance.

Note that you can also base64-encode webfonts in order to inline them.

2 Likes
#4

Thanks for the help. I replace the start of the GitHub gist URL with “https://gist.githubusercontent.com” and remove the cors-proxy head. Now it works pretty well on different devices. And I also find a very helpful notebook about it.

#5

If you want to fetch content from Github (be it gists or files), there’s also raw.githack.com, the spiritual successor to rawgit.com.

1 Like