Blog Sep 2, 2017 · 2 min read

CRV: Using custom fonts

Using custom fonts in Create React Video is easy!

Custom fonts

In a webpage, you would probably embed a font from Google Fonts. You can still do that by copying the code into the <head> of the public/index.html file:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Then simply set the appropriate font name in the styles of your component:

const Title = props => {
  return (
    <h1 style={{ fontFamily: "Open Sans" }}>
      Hello, World
    </h1>
  );
};

The problem with this approach is that it doesn't work offline. An alternative is to download the font from Google Fonts (or similar service) and manually install it on your system. You can then set the fontFamily just as before.

The inconvenience is that if you share your code with someone, or continue your work in a different computer, you'll have to manually copy and install the fonts again. A better way is to take advantage of the Typefaces project.

Using Typefaces

Typefaces includes a long list of open source fonts (currently 845, most of them from Google Fonts) each one published as its own independent NPM package. This means you simply have to install it locally with:

yarn add typeface-open-sans

Or if you don't use Yarn:

npm install --save typeface-open-sans

Then simply import it at the top of your JavaScript file:

import "typeface-open-sans";

That's it! This is not specific to Create React Video or Create React App. Many tools built with Webpack will work out of the box with Typefaces.

In case you're curious, you can see the source for the animation on top here.

Write a comment on GitHub