13

I want to use a font in my web page but i get these error messages in firefox when loading page:

downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:1) source: .../css/Yekan.woff2  custom.css:1:12
downloadable font: incorrect file size in WOFF header (font-family: "Yekan" style:normal weight:normal stretch:normal src index:2) source: .../css/Yekan.woff  custom.css:1:12
downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:2) source: .../css/Yekan.woff  custom.css:1:12
downloadable font: FFTM: invalid table offset (font-family: "Yekan" style:normal weight:normal stretch:normal src index:3) source: .../css/Yekan.ttf  custom.css:1:12
downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:3) source: .../css/Yekan.ttf  custom.css:1:12
downloadable font: CFF : table overruns end of file (font-family: "Yekan" style:normal weight:normal stretch:normal src index:4) source: .../css/Yekan.otf  custom.css:1:12
downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:4) source: .../css/Yekan.otf

my custom.css file:

@font-face {
    font-family: 'Yekan';
    src: url('./Yekan.eot');
    src: url('./Yekan.eot?#iefix') format("embedded-opentype"),
    url('./Yekan.woff2') format('woff2'),
    url('./Yekan.woff') format('woff'),
    url('./Yekan.ttf') format('truetype'),
    url('./Yekan.otf') format('opentype'),
    url('.//Yekan.svg#Yekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

my style.css (where i use the font):

body
{
   font-family: "Yekan";
}
  • I have searched a lot and found nothing to solve this.
  • I have used this font before and I had no problem.
  • I checked the meme type and it was correct (for example meme type of Yekan.ttf was application/x-font-ttf).
Mohammad
  • 241
  • 1
  • 2
  • 8
  • Is the font [invalid or corrupted](https://support.mozilla.org/en-US/questions/913498)? – Álvaro González Sep 07 '19 at 16:33
  • how can I check that? I have read that page and used the generator result was the same, also there is no option named gfx.downloadable_fonts.sanitize in about:config. As I said i have used this font before I dont think the font file is the problem. – Mohammad Sep 07 '19 at 16:40
  • That's an old forum post, they've surely change most of the underlying code in Firefox. But fonts with errors have caused me problems before in software like OpenOffice. Perhaps you can find an online font validator to be sure. – Álvaro González Sep 07 '19 at 16:48
  • 2
    The error is pretty clear: the font's header data for its size, and the actual filesize, are different values, which means it was incorrectly converted to woff2. Redownload the font (or if you built it, rebuild it). Also, it's 2019: why on earth are you loading font formats that haven't existed for years, and why are you loading ttf/otf at all? [Use woff2, with woff as fallback. That covers every still support browser including Internet Explorer](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385) – Mike 'Pomax' Kamermans Sep 07 '19 at 17:05
  • I loaded all format to test if they work or not, But I am sure the font has no problem because I uploaded it to server multiple times and this font is being used by hundreds of sites without any trouble. github page of the font: https://github.com/ParsMizban/Yekan-Font – Mohammad Sep 07 '19 at 18:22

2 Answers2

8

I have found the problem, I used Filezilla to upload fonts to server and it was set on ASCII transfer mode, after switching to Binary and re-uploading fonts problem solved.

Mohammad
  • 241
  • 1
  • 2
  • 8
0

I recently had this problem with the icon font of the npm package bootstrap-icons version 1.5.0 on the server. I'm using the icons classes and wrapping them with own class names in SCSS.

The solution for me was to redefine the bootstrap font-family and copy and rename the font files to the project. So it looks in styles.scss like this:

@font-face {
  font-family: "bootstrap-icons-redef";
  src: url("../assets/fonts/bootstrap-icons-redef.woff2") format("woff2"),
  url("../assets/fonts/bootstrap-icons-redef.woff") format("woff");
}

A small disadvantage of this solution is that I have to check node_modules/bootstrap-icons/font/bootstrap-icons.css on every update to be sure my redefinition is still in sync with the file above.

Juri Sinitson
  • 1,445
  • 1
  • 14
  • 18