Re: How to bundle and use custom web fonts in SPFx projects (Prod mode)

SPFx: 1.14/1.15.0-rc.0 

I followed How to bundle and use custom web fonts in SPFx projects but didn't work for me in "Prod mode" (gulp bundle --ship && gulp package-solution --ship). It worked for me at "Dev time" (gulp serve in Workbench or in a Sharepoint page in "full trust client-side solution" mode, no --ship).

To make it work I had to change the outputPath value (in fontLoaderConfig) from 'fonts/' to '/'.

const fontLoaderConfig = {

test: /\.(woff(2)?)(\?v=\d+\.\d+\.\d+)?$/, // I'm only checking for woff2

use: [{

loader: 'file-loader',

options: {

name: '[name].[ext]',

outputPath: '/'

}

}]

};

I noticed that the runtime font references were like: https://[mySite].sharepoint.com/sites/appcatalog/ClientSideAssets/[GUID]/fonts/[myFont].woff2 but visiting https://[mySite].sharepoint.com/sites/appcatalog/ClientSideAssets/[GUID], all the assets were at the same level, like https://[mySite].sharepoint.com/sites/appcatalog/ClientSideAssets/[GUID]/[myFont].woff2.