Adding / Rendering Custom Fonts

[mrgodhani]

Just out of curiosity. Where would I store custom web fonts ? When I store under assets and package the app it doesn't render the custom fonts.

[bradstewart]

It's most likely an issue with the font-url in the CSS file. If you're referencing the fonts from LESS or SASS, assets would be the right place. If not, I put them in static (along with the relevant CSS).

[mrgodhani]

Write now I have following code under scss file in assets folder. When I run in development mode it renders perfectly. But during packaging for production it turns css url too assets/<fontname> Not sure how to solve that.

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('./assets/lato-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('./assets/lato-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./assets/lato-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./assets/lato-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./assets/lato-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./assets/lato-v11-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

[bradstewart]

Give this a shot.

• Put the fonts in assets/fonts.
• In SCSS, use url('assets/fonts/{fontname}') to reference them.
• Replace the image/font loader in webpack.base.conf.js with the code below.

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: path.join(config.build.assetsSubDirectory, 'img/[name].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: path.join(config.build.assetsSubDirectory, 'fonts/[name].[ext]')
  }
}

I tested it quickly with FontAwesome and it seems to work.

The other option (and what I typically do since fonts don't need to be processed by webpack), is to put a separate css file declaring the fontface along with the fonts inside static, and <link> that into the HTML directly.