Using Custom Fonts in Phoenix

Apr 24, 2021 :: 1 min read :: phoenix elixir TIL

Over the years a lot of outdated information has built up online for how to do this. It’s much simpler than what a lot of posts would lead you to believe. No additional plugins are needed, just a little configuration.

These instructions are accurate as of Phoenix 1.5.8 and Webpack 5.

  • Place your font in assets/static/fonts

  • Configure Webpack to copy fonts to the fonts folder. Put this in assets/webpack.config.js. The regex can be changed to expand or limit the extension types depending on your situation.

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/'
      }
    }
  ]
}

That’s it. Your fonts will now be available at localhost:4000/fonts/.

Questions or comments? Feel free to contact me.
Want to hear more from me? Sign up for my newsletter.