0

I have a custom web part that displays weather data and I'm using a custom icon font to go along with the data.

It works on the hosted workbench but when I package the solution and deploy it on my tenant, I get the following console errors:

Failed to decode downloaded font: <URL>
OTS parsing error: invalid sfntVersion: 1702391919

The font files are located at src\webparts\mywebpart\font and the @font-face and other icon-related styles are in a CSS file src\webparts\mywebpart\style.

I added a copy-static-assets.json file with the following code:

{
    "includeExtensions": [
        "ttf",
        "woff",
        "eot",
        "woff2",
        "svg"
    ]
}

My gulpfile was updated to look like this:

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

// Font loader configuration for webfonts
const fontLoaderConfig = {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'font/' 
    }
  }]
};

// Merge custom loader to web pack configuration
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {

    generatedConfiguration.module.rules.push(fontLoaderConfig);

    return generatedConfiguration;
  }
});

build.initialize(require('gulp'));

And I'm referencing the icon CSS in my MyWebPart.ts file like this:

import './style/weather-icons.min.css';

In Chrome's inspector, I can see it's referencing the public SharePoint CDN:

sharepoint cdn reference

And when I click the link, it appears to load the font without issue:

font loading correctly

What am I doing wrong here?

3
  • It's also worth noting that I tried hosting the font files elsewhere too and I get a CORS error. Jun 9, 2021 at 20:06
  • How do you know that it is loading the font correctly? It looks like a something like Times New Roman is being loaded, which may be a fall-back font in the browser. Jun 11, 2021 at 0:49
  • @A.k.A Fritz - It’s an icon font so I’m not sure what the standard character set should look like. I assume that if it’s showing me anything at all rather than throwing an error, it loaded. Maybe that’s an assumption I shouldn’t make. Jun 12, 2021 at 1:13

2 Answers 2

0

I was able to get it working by using the Transfonter conversion tool to reconvert my files and selected the option to embed files in the CSS.

0

Why not use the readily accessible Office UI Fabric Icons?
I have never received a CORS error with Fabric UI Icons.

5
  • Because there aren’t enough weather-related icons to cover every type of weather event. Jun 12, 2021 at 1:13
  • Interesting. How many weather icons does the font you are trying to use have? How many of those do you expect to actually use? Is the iconography culture specific? Jun 13, 2021 at 4:06
  • I’m not looking directly at it at the moment but it has something like 200 icons. It’s useful to be able to tell the difference between a light rain and a heavy rain, for example. Or high wind. Or a number of other possible events. Jun 13, 2021 at 7:01
  • Forgive my ignorance. Glad you were able to fix your issue. One last question - this is just out of curiosity - what is your data source for the weather in this application? Jun 13, 2021 at 7:29
  • I’m using the OpenWeatherMap API. It’s super easy to use but the forecasts (in my hometown at least) so far have been 3-5 degrees (F) different than other forecast I’ve found. I’ll need to match the forecasts up with something authoritative to see how accurate it is before I decide if I stick with it. Jun 14, 2021 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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