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