Ethan Gunderson

Using Custom Fonts in Phoenix

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.

{
  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/.

#elixir #phoenix #til