0

I have a custom font, I include it in the bundle and add it to the dist folder, but the js reference is still linking to its original location. Any ideas? [

enter image description here

  • Have you tried using an import instead of url so the module resolution pre processor can pick it up? – baywet Jun 26 '18 at 21:15
  • Yes, I put an import in the sass and nothing. I believe that the problem is in the order in which it is executed, first the sass goes and then the webpack runs. Thanks – Adrian Diaz Cervera Jun 27 '18 at 11:37
  • I took the time to open an older project (1.4.1) and I noticed the only difference is that it's using relative paths. So instead of url('/fonts/myfont.ttf') I have url('./fonts/myfont.ttf') (notice the .) Also, which version of SPFX is your project on? – baywet Jun 27 '18 at 12:53
  • The version is 1.5. and in the gulpfile add this code build.configureWebpack.mergeConfig({ additionalConfiguration: (generatedConfiguration) => { generatedConfiguration.module.rules.push( { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: { loader: 'file-loader' } }, { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: { loader: 'file-loader' } }, { test: /\.[ot]tf$/, use: {loader: 'file-loader' } } ); return generatedConfiguration; } }); – Adrian Diaz Cervera Jun 27 '18 at 15:51
  • It should work by default without needing you to override the webpack configuration. What if you comment it out? – baywet Jun 27 '18 at 16:40
0

Adrian,

I was able to resolve this issue with the exception of WOFF2 fonts. Here is how I did it.

  1. Upload the font files in the same folder as the .SCSS file. For simplicity, I kept the font files in the same folder as the SCSS, but once you can prove it works, feel free to move the files anywhere you'd like.
  2. Include the @font-face definition in your SCSS. For this example, I used Google Webfont's generated SCSS:

    @font-face {
        font-family: 'Aclonica';
        font-style: normal;
        font-weight: 400;
        src: url('./aclonica-v8-latin-regular.eot'); /* IE9 Compat Modes */
        src: local('Aclonica Regular'), local('Aclonica-Regular'),
        url('./aclonica-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        //  url('./aclonica-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('./aclonica-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('./aclonica-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('./aclonica-v8-latin-regular.svg#Aclonica') format('svg'); /* Legacy iOS */
    }
    
  3. Note that I commented out the woff2 font. This is the only one that would require messing with webpack and gulp, which I didn't want to do.

That is all you need to do.

Bonus tip: I noticed from your code sample that you only specify the TTF font file. You can use http://font2web.com/ to convert your custom TTF to webfonts if you want broader browser support.

I hope this helps?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.