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… (funda kabanzi)
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
