Flash of Invisible Text

Question

У меня есть веб-сайт, где весь текст в нем использует пользовательский шрифт. Проблема заключается в том, что каждый браузер ведет себя по-другому с пользовательским шрифтом, таким как Flash of Invisible Text.

В принципе, то, что я хочу сделать, это изначально в документе. Теперь, чтобы установить шрифт в Arial, а затем, как только шрифт установлен, я установил весь текст в свой собственный шрифт.

Однако, вот результат, который я получаю? Каждая страница становится arial тогда мой пользовательский шрифт. Я вижу, что проблескивание шрифта раздражает?

Теперь, мой вопрос: - Как создать событие jquery, которое вызывается только один раз через весь мой сайт? спасибо,

Answer 1

Спасибо за помощь .. Теперь она работает отлично:

Я использовал следующие:

1- Во-первых, в CSS Я использую Arial

2- Используя этот JS: // я поставил ниже внутри JQuery pagebeforeshow события

WebFontConfig = { google: { families: [ "customfont1","customfont2"] } , active : function() { 
 
\t \t //alert("this is the default font"); 
 
    \t 
 
    \t \t // All Body 
 
    \t \t for (i = 0; i < document.all.length; i++) { 
 
\t \t \t document.all[i].style.fontFamily = "customfont1"; 
 
\t \t } 
 
\t \t // Titles 
 
\t \t var x = document.getElementsByClassName("title"); 
 
\t \t var i; 
 
\t \t for (i = 0; i < x.length; i++) { 
 
    \t \t x[i].style.fontFamily = "customfont2"; 
 
    \t \t  \t \t } 
 
    \t \t 
 
}, 
 
timeout: 2000, \t 
 
}; 
 

 
(function() { 
 
    var wf = document.createElement('script'); 
 
    wf.src = ('webfont.js'); 
 
    wf.type = 'text/javascript'; 
 
    wf.async = 'true'; 
 
    var s = document.getElementsByTagName('script')[0]; 
 
    s.parentNode.insertBefore(wf, s); 
 
})(); 
 
    
 
});