1466201 - Blink fonts when overriding font-family in css

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Alon]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180516032328

Steps to reproduce:

1. Set a generic font-family attribute for the body element and INLINE IT IN A STYLE ATTRIBUTE WITHIN THE <header> of the document.

2. For the same page - PRELOAD A CSS FILE WITH A DIFFERENT font-family value for the body element (.ttf file hosted locally).



Actual results:

The whole text within the page is blinking until the css preloaded file is loaded, and the latter font family is set.


Expected results:

I'm setting the custom font in a css preloaded file instead of loading it in the <HEADER> only because Google's Light House performance reasons.

URL for testing, See the issue in action:
https://sexeden.co.il/

The same issue occurs also in Mozilla for Android.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I think this is expected, given we don't support <link rel="preload"> for fonts iirc? But you should be able to workaround the blinking with:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display