Mam taki problem, który praktycznie da się zaobserwować tylko pod IE - gdy odświeżamy stronę za pomocą ctrl+F5, to przez chwilę widzimy wszędzie złe czcionki. Na oko to jest to Times New Roman. Po chwili czcionki się ładują i już jest ok, ale te pierwsze sekundy są bardzo, bardzo nieestetyczne (szczególnie w tytułach, gdzie użyto bardzo "fikuśnej" czcionki).
Czy wiecie może jak najprościej rozwiązać ten problem?
Jedyne co mi przychodzi do głowy do spróbowanie ustawienia jako czcionkę domyślną strony, jakąś ładniejszą, zbliżoną do tych użytych na stronie oraz oczywiście taką, która jest standardowo domyślna w systemie. Tak jeszcze dla pewności spytam, jak ładujesz czcionki?
Najprościej to to olać :) Ludzie chyba przywykli do niepełnej treści w trakcie jak coś się ładuje.
Druga opcja to zabawy z javascriptem. Zaraz po otwarciu body wstaw skrypt, który doklei do <head> takie krótkie coś: <style>* { visibility: hidden; }</style>. Potem na window.onload wstaw kod usuwający to, co dodałaś.
Dodawanie robimy przez JS, żeby ludzie bez JS nie mieli pustej strony.
window.onload powinien odpalić się, gdy załaduje się CAŁA strona - to może nie być pożądane i możesz chcieć załadować sobie tylko pliki z fontami. Niestety zgubiłem gdzieś linka do fajnej biblioteki do preloadu, mam tylko to: https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js - ale nietestowane.
Artykuł, który opisuje ten problem np tu: http://webdesign.tutsplus.com/articles/quick-tip-avoid-fout-by-adding-a-web-font-preloader--webdesign-8287
Ogólnie słowo-klucz na Twój problem: <abbr title="flash of unstyled text">FOUT</abbr>.
A tak swoją drogą - ludzie robią wszystko, żeby opóźnić ładowanie tak zbędnych pierdół jak fonty, a jak najszybciej wyświetlić stronę:
http://www.filamentgroup.com/lab/font-events.html (o fontach)
https://adactio.com/journal/8504 (to już w ogóle hardkor)
... bo jak wiadomo, jak się strona za długo ładuje to user znajdzie sobie inną - a Ty się martwisz błyskotkami :)
Edit:
Pytanie wyżej ma sens: Jak w ogóle ładujesz te fonty, gdzie linkujesz do pliku CSS, itd?
I drugie pytanie: O jakiej wersji IE mówimy?
Najprościej to to olać :) Ludzie chyba przywykli do niepełnej treści w trakcie jak coś się ładuje.
Hehe, nie ten klient ;) A muszę przyznać, że faktycznie w tytułach ma rację, że wygląda przepaskudnie...
Większość fontów jest ładowana przez link rel do google.fonts, ale ta jedna kluczowa (użyta w tytułach) jest nietypowa i w plikach, ładowana font-facem w pliku css. Plik css jest pobierany w headerze, a font-face jest na początku pliku (nadanie stylu tytułowi zaraz po).
Próbowałam zmienić domyślną czcionkę poprzez:
CSS *
{
font-family: 'Poiret One';
}
h1
{
font-family: 'Reenie Beanie' !important;
}
(Wiem wiem, powinno być coś bardziej standardowego niż Poiret One - na razie testowałam na tym, bo tą czcionkę wskazał klient)
Efekt jest taki, że wszystko na stronie jest w Poiret One :D Tytuł również, mimo !imoprtant. Oczywiście najpierw ładuje się Times New Roman, a dopiero po chwili widzę wszędzie Poiret One.
Problem występuje na IE 11.
Później pokombinuję z js, dzięki za linki :)
@aurel: Z tego co kojarzę nie może być spacji przed !important
windows.onload niestety odpalał się zbyt późno, bo po załadowaniu też wszystkich obrazków. Ostatecznie idealnym rozwiązaniem okazało się użycie web font loadera:
https://github.com/typekit/webfontloader
http://www.paulirish.com/2009/fighting-the-font-face-fout/