Easy to import Google Fonts using `@remotion/google-fonts` #1394

@remotion-dev has funded $279.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

Hi @JonnyBurger , can I take this issue instead of #1391? Because that issue needs #1377 to be done. Thanks.

Yes! Assigned you 😁

Thanks 😁

I noticed that in https://github.com/jonathantneal/google-fonts-complete the font link provided only supports one font URL even though it has multiple subsets, while in actual Google Fonts CSS it uses different URLs for each subset.

For example Roboto (normal 500), when we generate using that script, we got:

{
  "Roboto": {
    // ...
    "variants": {
      // ...
      "normal": {
        // ...
        "500": {
          "local": [],
          "url": {
            "woff2": "https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2"
          }
        },
        // ...
      }
    },
    "version": "v30"
  }
}

And from Google Fonts CSS, we got:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Here is cleaned list to make it easier to compare:

# From Script:
'normal 500':   https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2

# Google Fonts CSS (normal 500):
'cyrillic-ext': https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2
'cyrillic':     https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2
'greek-ext':    https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2
'greek':        https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2
'vietnamese':   https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2
'latin-ext':    https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2
'latin':        https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2

So I think we need to create a custom parser to support loading font with different subsets.

Interesting observation! Maybe on https://developers.google.com/fonts/docs/developer_api you can get the complete list as JSON?

On this site you can make a request through the console without having to give an API key.

Hey y'all,

I was battling with this too. This is a solution that works for me in <Player />, <IframePlayer /> and in server-side rendering.

In short the technique is to add a <style>-tag with the CSS @import directive, and then wait for the document font loading events before proceeding with the rendering.

What I like about the technique is that it's dirt simple, and I find the @import directive in CSS much easier to use than JavaScript-based options. Plus it's generalized... so not only Google Fonts. 🥳

I'm happy to contribute a PR of some sort with the technique.

import React, { useEffect, useState } from 'react';
import {
  continueRender,
  delayRender,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

// utility, does nothing else than allow vs code to do CSS syntax highlighting when used
// Usage:
//   css`
//     .my-classname { background-color: red; }
//   `
export const css = (strings: TemplateStringsArray, ...values: any[]) => {
  let str = '';
  strings.forEach((string, i) => {
    str += string + (values[i] ?? '');
  });
  return str;
};

function logLoadedFonts() {
  const loadedFonts: string[] = [];
  document.fonts.forEach(({ family, variant, weight }) => {
    loadedFonts.push(`${family} ${weight} ${variant}`);
  });
  console.log(`Loaded fonts:\n${loadedFonts.join('\n')}`);
}

function useWaitForFontsToLoad() {
  const [waitForFontsHandle] = useState(() => delayRender());

  useEffect(() => {
    function handleLoadingDone() {
      logLoadedFonts();
      continueRender(waitForFontsHandle);
    }

    document.fonts.addEventListener('loadingdone', handleLoadingDone);

    return () => {
      document.fonts.removeEventListener('loadingdone', handleLoadingDone);
    };
  }, []);
}

export const MyVideo: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { width } = useVideoConfig();
  useWaitForFontsToLoad();

  const fontsCssSource = css`
    @import url('https://fonts.googleapis.com/css2?family=Bangers');
  `;

  const baseCss = css`
    /* somewhat stolen from https://github.com/sindresorhus/modern-normalize */
    *,
    ::before,
    ::after {
      box-sizing: border-box;
    }
    html {
      /* use a base size that scales with the composition width  */
      font-size: ${0.02 * width}px;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -moz-tab-size: 4;
      tab-size: 4;
    }
    body {
      margin: 0;
      font-family: system-ui,
        -apple-system /* Firefox supports this but not yet \`system-ui\` */,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji';
    }
  `;

  return (
    <>
      <style>{fontsCssSource}</style>
      <style>{baseCss}</style>
      <div
        style={{
          backgroundColor: 'lightblue',
          flex: 1,
          textAlign: 'center',
          fontSize: '3em',
          fontFamily: 'Bangers',
        }}
      >
        <p>{text}</p>
        <p>The current frame is {frame}.</p>
      </div>
    </>
  );
};

So I think we need to create a custom parser to support loading font with different subsets.

If you want to go down the parser rabbit hole I suggest having a look at peggy. It's a library for creating parsers. 🤓

Interesting observation! Maybe on https://developers.google.com/fonts/docs/developer_api you can get the complete list as JSON?

On this site you can make a request through the console without having to give an API key.

Yes, actually I use that to get the list of available fonts, but unfortunately the API only provides us with .ttf font and also no Unicode ranges.

I have completed the .ts font generator and will provide an example repo for testing here soon.

@marcusstenbeck Thanks for sharing the code, it really helpful.

For the current CSS parser, I use PostCSS. But the peggy package looks interesting, I will definitely try it out in some projects.

You are right, the Google Developer API does not seem fit, I also don't see a way to get the WOFF files. Glad to hear you are making progress!

I will investigate what Marcus said soon.

Hi, I have created an example repo at https://github.com/ayatkyo/remotion-google-fonts-example

Use pnpm generate-fonts to generate all google fonts as .ts files. The font metadata is included in generated .ts file so we don't need to parse a big JSON file.

I also export some other things besides loadFont for easy use. For example, instead of typing the font family name manually, we can use the exported family.

import { loadFont } from './fonts/Roboto';

loadFont('normal', {
  weights: ['400', '600', '700', '800'],
  subsets: ['latin'],
});

let textStyle: React.CSSProperties = {
  fontFamily: 'Roboto',
  // ...
};

We can use:

import { loadFont, family } from './fonts/Roboto';

loadFont('normal', {
  weights: ['400', '600', '700', '800'],
  subsets: ['latin'],
});

let textStyle: React.CSSProperties = {
  fontFamily: family,
  // ...
};

Also for using multiple fonts in the same file, we should use like this:

import * as TitanOne from './fonts/TitanOne';
import * as Pacifico from './fonts/Pacifico';

TitanOne.loadFont('normal', {
  weights: ['400'],
  subsets: ['latin'],
});
Pacifico.loadFont('normal', {
  weights: ['400'],
  subsets: ['latin'],
});

Should not do additional work if the user calls the same function multiple times

For this feature, I have tried checking all loaded fonts from document.fonts like this when call loadFonts:

for (const weight of options.weights) {
  for (const subset of options.subsets) {
    //  ...

    //  Check is already loaded
    let hasLoaded = false;
    for (const docfont of document.fonts.values()) {
      if (docfont.family == meta.family &&
        docfont.style == style &&
        docfont.weight == weight &&
        docfont.unicodeRange == meta.unicodeRanges[subset]) {
        hasLoaded = true;
        break;
      }
    }

    if (hasLoaded) {
      console.log(`Skip '${meta.family}' style:${style} weight:${weight} subset:${subset}, font already loaded`);
      continue;
    }

    //  ...
  }
}

But I don't know if this is the right solution.

I also add more conditions like docfont.status == 'loaded', but if we call loadFont() twice, the second loadFont() call is not waiting for the first loadFont() call, so the condition remains false because the status is not loaded.

@ayatkyo This looks pretty promising!

Are you getting a lot of ECONNRESET errors as well when running pnpm generate-fonts? It looks like it's generating all fonts at once...

Once you are comfortable with a prototype, please send a PR to this repository, make a new folder in packages, I can help you make it integrate properly with the monorepo.

I agree with the API in your first comment, looks very good!

For checking whether the font has already been loaded, I was thinking of just making a unique key for each font style and keep an object in module scope and return if it's already been called before. For example:

const fontsLoaded = {
  'Montserrat-400-latin-italic': true
}

// ...

const loadFont = () => {
    const key = makeKey({weight, fontFamily, script})
    if (fontsLoaded[key]) {
        return 
    }
}

Does that seem sound?

Are you getting a lot of ECONNRESET errors as well when running pnpm generate-fonts? ...

@JonnyBurger Unfortunately I don't get ECONNRESET error, I also tested on my server and don't get the error. Maybe something to do with the connection or User-Agent that is used in the script.

Can you access the links using a browser?

• https://fonts.googleapis.com/css2?family=Titan+One:ital,wght@0,400
• https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900

It looks like it's generating all fonts at once...

Yes, the script will generate the fonts in a batch with max 100 requests will run concurrently. So it won't need to wait previous request to complete.

For checking whether the font has already been loaded, I was thinking of just making a unique key for each font style and keep an object in module scope and return if it's already been called before.

That sounds good, I have implemented that and its works well.

For the package, what should be included as the package contents, is it only contain the generated font (.ts) or together with the script to generate it?

If we want to access it like "@remotion/google-fonts/FontName", I think we should put it in the root directory of the package, right?

Also maybe we can automatically generate the fonts using GitHub Action.

@ayatkyo Sorry for the late response...

Yes, the script will generate the fonts in a batch with max 100 requests will run concurrently. So it won't need to wait previous request to complete.

I think that's the reason why I get ECONNRESET errors on macOS! Maybe it's good to lower the limit to around 10.

That sounds good, I have implemented that and its works well.

Nice!

For the package, what should be included as the package contents, is it only contain the generated font (.ts) or together with the script to generate it?

Let's also include the script, but we can use .npmignore to only ship the fonts.

If we want to access it like "@remotion/google-fonts/FontName", I think we should put it in the root directory of the package, right?

Correct, we need to ship a .js file and a .d.ts file, like this: https://github.com/remotion-dev/remotion/blob/873e59cf972b855c1ecb98e99ae459fce02b2de9/packages/core/version.js#L2 and https://github.com/remotion-dev/remotion/blob/873e59cf972b855c1ecb98e99ae459fce02b2de9/packages/core/version.d.ts#L2

This enables an import like import version from "remotion/version"

Also maybe we can automatically generate the fonts using GitHub Action.

We could, I'd say for simplicity this is not required for now, unless you feel motivated to do so 😁

@JonnyBurger Thanks for the response, I have created a Draft PR and changed the generator limit to 10.

We could, I'd say for simplicity this is not required for now, unless you feel motivated to do so 😁

Good, I will create that in a separate PR after completing this. 😁

@jonnyburger has rewarded $251.10 to @ayatkyo. See it on IssueHunt

• :moneybag: Total deposit: $279.00
• :tada: Repository reward(0%): $0.00
• :wrench: Service fee(10%): $27.90

@JonnyBurger Are there any limitations with this when running on AWS lambda? The preview shows up correctly on the localhost:3000 preview page, but when running on lambda it is not using the correct font.

@Leland-Takamine I would be surprised if it did not work on Lambda, are you aware that you need to redeploy your site to S3 when making a change?

@JonnyBurger Ah ok I think I mistakenly thought that the font was not loading correctly because the output looked so different in the rendered video output. Note the spacing between lines and different kerning (top=preview, bottom=rendered video):

<img width="870" alt="image" src="https://user-images.githubusercontent.com/847683/202577869-3a3b93bd-b5c6-4f02-842b-146b6678a2dc.png">

Is this just due to a difference between browsers being used in each situation?

(btw rendering locally seems to render correctly with no discrepancies with the preview)

I think that is the difference between macOS and Linux rendering unfortunately 😑

Maybe a Chrome flag can help, if you let me know the font name, I will do a quick test. But it looks like while one font is thinner than the other and the kerning is bad, it is the same font.

Got it ok thanks for context! The font is Roboto Mono

@Leland-Takamine Sorry for the slow response in investigating it! Unfortunately, I can confirm the issue and do not have found a solution by trying out various Chrome flags and the method described here: https://blog.richardkeller.net/wkhtmltopdf-bad-kerning-on-aws-lambda/

So it seems like either a Linux or Chrome behavior out of my control :(