Два Webfonts (Google & Typekit) Один как отказ, как избежать звонков?

Question

Прямо сейчас у нас есть один шрифт, который используется главным шрифтом и исходит от Typekit. Мы хотим иметь откат от Google Webfonts. Шрифт Typekit реализован с помощью набора js.

Наша проблема прямо сейчас в том, что мы хотим избежать звонков на разные CDN. Мы не хотели загружать два разных шрифта. Шрифт стек будет выглядеть так:

"TypeKit Font", Google шрифт, Arial, без засечек ....

Мой вопрос просто очень легко ответить. Есть ли простой способ избежать этих вызовов и проверить, недоступен ли основной шрифт? И загрузить другую?

Я не разработчик, но у меня есть ручка с одним, и он говорит, что этого не может быть сделано. Просто нужно немного еды для этого разработчика, чтобы продолжать и делать это.

Answer 1

Это немного растягивается, но вы, вероятно, можете использовать Font Events типа typekit для условной загрузки веб-шрифта Google, если ваш шрифт типаkit генерирует «неактивное» событие. Проблема заключается в том, что для вашего шрифта может потребоваться до 5 секунд для «тайм-аута», и ваш пользователь останется в беде во время этого процесса.

Я действительно предлагаю не, делая это, и просто используя приличный отступ CSS.

Тем не менее, это JS должно быть начало (хотя и ужасным):

JS

<script type="text/javascript" src="//use.typekit.net/vio0gns.js"></script> 
<script type="text/javascript"> 
    try { 

    var config = { 
     scriptTimeout: 3000 // tweak as necessary 
    }; 

    Typekit.load({ 
     loading: function() { 

     }, 
     active: function() { 

     }, 
     inactive: function() { 
     console.log('Font Timed Out'); 
     WebFontConfig = { 
      google: { families: [ 'Balthazar::latin' ] } 
     }; 
     (function() { 
      var wf = document.createElement('script'); 
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
      wf.type = 'text/javascript'; 
      wf.async = 'true'; 
      var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(wf, s); 
     })(); 
     } 
    }) 
    } catch(e) {} 

</script> 

Codepen Example (шрифт Google должен загрузить после 3-5 secounds)

Answer 2

Вы можете сначала определить тип браузера с помощью JavaScript, а затем загрузить набор стилей CSS, каждый из которых содержит отдельное семейство шрифтов. Запросы СМИ также могут работать. Извините, слишком много примеров для начала.