Font files not displayed, but loaded correctly.
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
Modifié le par lucid_j
Toutes les réponses (3)
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
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.
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..