Fonts "downloadable font: rejected by sanitizer" or "Failed to decode downloaded font"

[jlounds]

• [ X ] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [ X ] Search for existing issues (including closed ones): https://github.com/oblador/react-native-vector-icons/issues

Environment

• Mac OS, web platform, using Expo
• Excerpts from package.json:

  "@expo/webpack-config": "~19.0.1",
  "expo": "~50.0.6",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-native": "0.73.4",
  "react-native-paper": "^5.12.3",
  "react-native-web": "~0.19.6",
  "url-loader": "^4.1.1"

Description

Web fonts for the icons are not being downloaded / interpreted by Firefox, Chrome, or Safari and only show the dreaded square box. (Firefox shows a Unicode number as well)

Firefox error message in developer tools console:

downloadable font: rejected by sanitizer (font-family: "MaterialCommunityIcons" style:normal weight:400 stretch:100 src index:0) source: http://localhost:19006/static/media/MaterialCommunityIcons.7527ec3ffabe608ca630.ttf

Chrome:

Failed to decode downloaded font: http://localhost:19006/static/media/MaterialCommunityIcons.7527ec3ffabe608ca630.ttf
OTS parsing error: invalid sfntVersion: 1702391919

I confirmed that the file in /static/media is being downloaded. In fact, I tried uploading it to https://transfonter.org/ to see if I could convert it to a different format and manually add it, but even that failed saying the "Font file is corrupted."

Code

I tried following the instructions in the readme, but I think Expo and/or the version of webpack is complicating things. But since I am new to all of this, I don't know how to narrow it down.

• webpack.config.js

  
  const createExpoWebpackConfigAsync = require('@expo/webpack-config');
  const path = require('path');

module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); config.module.rules.push( { test: /.ttf$/, loader: "url-loader", include: path.resolve(__dirname, "node_modules/react-native-vector-icons"), } ); return config; };

 - Excerpt from App.web.js

import materialCommunityIconFont from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'; const moreFonts = @font-face { src: url(${materialCommunityIconFont}); font-family: "MaterialCommunityIcons"; };

const moreFontsStyle = document.createElement('style'); moreFontsStyle.type = 'text/css';

if (moreFontsStyle.styleSheet) { moreFontsStyle.styleSheet.cssText = moreFonts; } else { moreFontsStyle.appendChild(document.createTextNode(moreFonts)); } document.head.appendChild(moreFontsStyle);

[c-goettert]

This stack-overflow answer led me to the solution that fixed it for me. In your webpack-config change this:

{
  test: /\.ttf$/,
  loader: "url-loader", // or directly file-loader
  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
}

to this:

{
  test: /\.ttf$/,
  type: 'asset/resource',
  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
}

This should probably also be updated in the readme.