This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Font files not displayed, but loaded correctly.

  • 3 replies
  • 1 has this problem
  • 7 views
  • Last reply by lucid_j

more options

Hi there

I am loading two font files and I am working on a website using vue.js and nuxt.js. The @fontface rules look like this:

``` @font-face {

 font-family: 'PatronWEB';
 font-style: normal;
 font-weight: normal;
 src: url('/static/fonts/PatronWEB-Regular.woff') format('woff');
 src: url('/static/fonts/PatronWEB-Regular.woff2') format('woff2');

}

@font-face {

 font-family: 'PatronWEB-Italic';
 font-style: italic;
 font-weight: normal;
 src: url('/static/fonts/PatronWEB-Italic.woff') format('woff');
 src: url('/static/fonts/PatronWEB-Italic.woff2') format('woff2');

} ```

Everything works fine, but sometimes in Firefox (Dev Edition and Standard Edition) the whole page appears white. After a long session of debugging I realized that the text is actually there, but it cannot be displayed because the fontfile is kind of «empty».

If I check the network tab I can see that the fontfiles were loaded correctly. If I hover the preview for the font in the css inspector, I don't see no preview. Which is really strange. So the browser thinks he has the font, but actually does not. So it would not even fallback to another font defined in the css rule.

Maybe it has also something to do with Hot module reloads, but in Chrome everything works fine, so I think it could be a firefox issue,

Please also check my attached files. I hope someone can help me with this.

Cheers J

Hi there I am loading two font files and I am working on a website using vue.js and nuxt.js. The @fontface rules look like this: ``` @font-face { font-family: 'PatronWEB'; font-style: normal; font-weight: normal; src: url('/static/fonts/PatronWEB-Regular.woff') format('woff'); src: url('/static/fonts/PatronWEB-Regular.woff2') format('woff2'); } @font-face { font-family: 'PatronWEB-Italic'; font-style: italic; font-weight: normal; src: url('/static/fonts/PatronWEB-Italic.woff') format('woff'); src: url('/static/fonts/PatronWEB-Italic.woff2') format('woff2'); } ``` Everything works fine, but sometimes in Firefox (Dev Edition and Standard Edition) the whole page appears white. After a long session of debugging I realized that the text is actually there, but it cannot be displayed because the fontfile is kind of «empty». If I check the network tab I can see that the fontfiles were loaded correctly. If I hover the preview for the font in the css inspector, I don't see no preview. Which is really strange. So the browser thinks he has the font, but actually does not. So it would not even fallback to another font defined in the css rule. Maybe it has also something to do with Hot module reloads, but in Chrome everything works fine, so I think it could be a firefox issue, Please also check my attached files. I hope someone can help me with this. Cheers J
Attached screenshots

Modified by lucid_j

All Replies (3)

more options

Separate security issue : please update your Flash 27.0 r0 Flash Player Version: 29.0.0.171 Current Version https://get.adobe.com/flashplayer/otherversions/ Step 1: Select Operating System Step 2: Select A Version (Firefox, . . . .) Note: Other software is offered in the download. <Windows Only>

Please supply the URL if there is a live page.

Please check your code in case that is the issue, W3C upload or URL

more options

Do you have any of the fonts installed locally?

Maybe do a check for sandbox security issues

You can set this pref to 2 or 1 on the about:config page to reduce the sandbox security level.

  • security.sandbox.content.level = 1
  • close and restart Firefox to make the change effective.

If '1' still doesn't have effect then try '0' to disable the sandbox.

If this didn't work then undo/reverse the change and reset the pref via the right-click context menu to the default value.

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

more options

No I just use the woff files, no local installation of the font.

I also tried the sandbox levels 1 and 0. Nothing helped. I also have to mention that: 1. At the beginning – just for a blink of an eye, I can see all the text. Then it disappears. So I guess first – before the font is loaded I see some fallback font, like Arial, then as soon as the browser thinks it got the fontfile, I see blank. 2. If I build and deploy everything is fine. Just in dev mode, when developing locally (with some browser sync and component injection via nuxt) I get the blank page. 3. It is not only on my computer. The same repository on another machine will cause the same issue in firefox..