BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Error Reports
  New Posts New Posts RSS Feed - Fonts flashing [SOLVED]
  FAQ FAQ  Forum Search   Register Register  Login Login

Fonts flashing [SOLVED]

 Post Reply Post Reply
Author
Message
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 739
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Topic: Fonts flashing [SOLVED]
    Posted: Dec 29 2017 at 8:11pm
Why is the displayed text on this (and others) page flashing?
First it comes up to the screen in a completely different font style,
which is the selected standard font of the FireFox (or any other) browser.
The expected size an color of the font ist ok during reception.
It does not matter which font or font family is selected in the CSS-Style.

After all information of this page did arrive, the fonts will be 'corrected' to the CSS-specified type.
That is a nono.

How can this be avoided or corrected, so the font would already be displayed correctly during the reception of the page content?

Sample domain (not complete yet):
https://pummelchen.org



Edited by digizar - Dec 30 2017 at 5:50pm
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Dec 30 2017 at 1:34pm
Hi,

You page is very light, so it appears almost instantly, before the webfont is loaded. You can either try to choose the page font to be something "standard" but closer to the webfont, or like on a number of websites make a "loader" - do not let user see the page until it is fully loaded. The simplest way to try is to show a white full-screen tag then hide it on page loaded, add a Code Block Visual with the code:


<div id="loader" style="position: fixed !important; z-index: 1000000 !important; left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:white;"></div>
<script>
$(function(){
  setTimeout(function(){ $('#loader').fadeOut("slow"); }, 500);
});
</script>

Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 739
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Dec 30 2017 at 5:50pm
Very nice, it works. Thanks o much.
-digi-
Have a nice trip into the next year. :-)
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.