How do I use a custom font with Phoenix 1.6 and ESBuild?

Questions & Help Questions
, , ,
1

I downloaded a font called “American Typewriter” and I now have a file named American_Typewriter_Regular.ttf in my priv/static/fonts directory.

But I can’t figure out how to get this file to work with my CSS.

At the top of my assets/css/app.css file I have the following lines:


@font-face {
  font-family: 'American Typewriter Regular';
  src: url('/fonts/American_Typewriter_Regular.ttf') format('ttf');
  font-weight: normal;
  font-style: normal
}

.my-logo {
  font-family: 'American Typewriter Regular';
  font-size: 28px;
}

What do I have to do to get ESBuild to use my font properly?

I’ve been reading ESBiuld docs and found this info:

You can @import other CSS files and reference image and font files with url() and esbuild will bundle everything together. Note that you will have to configure a loader for image and font files, since esbuild doesn’t have any pre-configured. Usually this is either the data URLloader or the external file loader.

So I guess my problem is that I’m not using a loader – but I don’t know exactly how to specify to ESBuild how to use a loader.

The docs tell me to set some configuration similar to this:

require('esbuild').buildSync({
  entryPoints: ['app.js'],
  bundle: true,
  loader: { '.png': 'dataurl' },
  outfile: 'out.js',
})

but I don’t know where to set this configuration.

TLDR: how do I use a font that I’ve downloaded and have saved in my fonts/ directory?