Custom Fonts Tips and Tricks?

[jholland918]

I've seen a couple threads in the Issues section regarding fonts and how they sometimes cause performance issues when going to export. So I'm going to share some things I've observed just in case it helps others. I'm a little hoping others will share more tips and tricks managing fonts too.

From my experimentation with a small project, it seems I can use Google Web Fonts without issue at design time by putting the full import in the HTML + Handlebars section like so:

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

This helps when trying out new and different fonts rapidly. But when I need to go to export the cards to PDF I find that I usually need to install the font locally on my machine and remove the import. Sometimes I don't have to install the font on my local machine, I can just replace my import with the font-face declaration just for the unicode range I need. For example, if you open the url in the import you'll see several font-face declarations. I'll just pull the latin one out and use it directly and it seems to perform a bit better:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v49/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}