Proper way to include new font and reference it?

Question

In the ReactQL file structure, is there a recommended place to store a custom font, and how would you reference that font?

For example, I've tried adding the font into ./static, and referencing it in styles.global.css, but no such luck.

Any recommendations?

Answer 1

You can reference fonts (or images) in three ways:

1. From within your JS code

You can import a font/img just like any other code, using ES6 module syntax:

// imports will start looking in your project root
image someFont from 'src/fonts/whatever.ttf'; // someFont = public path to font

In this case, someFont will equal a string of the font file path that's processed by Webpack, and dumped in the resulting dist folder. That's done for you automatically; you don't need to put the fonts or images anywhere special.

You can then reference this in your React components wherever you'd normally need the full file path; the string will be publicly accessible from the ReactQL web server:

// The regular, pre-processed PNG image
import logoImage from 'src/images/logo.png';

// A component that uses the image
const ShowLogo = () => (
   <img src={logoImage} />
);

In this case, logoImage might wind up as /assets/img/logo.d41d8cd98f00b204e980.png after Webpack has processed it and dumped the constant in the resulting Javascript bundle.

By convention, I'd recommend you keep static assets in the same folder as the calling React component. If you have multiple components pointing to the same assets, just choose a sensible name - like src/fonts/ or src/images, or even just /images.

2. From within your CSS

Inside any .css|sass|scss|less| or *.global. versions of the same, you can import using the regular @import syntax:

styles.global.css

@font-face {
    font-family: 'Starjout';
    src: url('./Starjout.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
  padding: 0;
  border: 0;
  font-family: 'Starjout';
  font-size: 16px;
}

To ensure the font is resolved correctly, import relative to the CSS file. In this case, Starjout.ttf resides in the same folder as styles.global.css.

3. Inside /static

Anything you put in /static will be placed in the resulting dist/public folder as-is. It won't be processed by Webpack- this means, images won't be compressed in production and no .gz or .br versions will be created. They'll simply be copied over.

To reference the file, you can then use the full URL inside your CSS. If you use a relative path, Webpack will expect to find the file relative to the source CSS and it won't work. Likewise, putting things in /static means the file will be copied over in its original form, so importing via JS won't work properly either.

The basic rule is: Any static file you want to consider 'source', put in src/ or anywhere else in your project route. Anything you want to copy without processing or being able to import dynamically, put in /static