get rid of FOUT (ugly font output seen before the font loads)

[sharabash]

this should be an inconspicuous thing such that the size of divs/containers don't change after the font is loaded and visibly rendered; also it would be nice to show something in place that indicates stuff is loading.

[shoaibik]

Also it took 10-15 seconds for me to load the actual fonts.

[mmahalwy]

@sharabash do you have a suggestion of what to do while font is loading?

[sharabash]

@mmahalwy show tashkeel text?

On Tue, Apr 19, 2016 at 9:07 PM Mohamed El Mahallawy <
[email protected]> wrote:

@sharabash https://github.com/sharabash do you have a suggestion of
what to do while font is loading?

—
You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub
#237 (comment)

[mmahalwy]

@sharabash +1 but how can we determine if it's loaded and replace the text font?

[notacouch]

Really working to resolve FOUT/FOIT takes work trying to simulate the target font in appearance, x-height, etc.

I haven't experienced any issues with quran.com and FOUT and currently my internet connection is rather poor (company moved to new facilities, guess IT still has to iron out kinks in traffic/congestion).

If they're talking about the main font, Montserrat, since it's not that large (45KB) you could just embed it inline.

E.g. if you're on a mac, in Terminal base64 encode the file and copy the output:

base64 < Montserrat-Bold.otf | tr -d '\n' | pbcopy

Then in your CSS (not css file, CSS on the page) paste the results in a data uri:

@font-face{
    font-family: Montserrat;
    src: url('data:application/opentype;base64,PASTE_HERE');
}

[notacouch]

If you need to detect the loading of a font, try FontFaceObserver.

[mmahalwy]

@notacouch this is awesome! @sharabash we should take a look at implementing FontFace

[notacouch]

Np. I just today noticed the developer's link and the github stuff. If there's somewhere I could look at for how developers can contribute, I'm all ears. I'm a full stack developer, though namely LAMP/LEMP, I'm sure I can pick up anything else.

[mmahalwy]

Sounds good - I do want to figure out a way to get people helping. Let me create an issue for it

[mmahalwy]

relates to #268.