Как Typekit выполняет незаметную работу?

Я предлагаю поискать WOFF (формат открытых веб-шрифтов). Должны быть доступны различные приложения (по крайней мере, одно бесплатное веб-приложение) для преобразования обычных настольных шрифтов в WOFF.

Единственным реальным препятствием для внедрения любого шрифта, который вы хотите, являются лицензионные ограничения, и именно для этого был создан Typekit. Они предоставляют средства для легального встраивания веб-шрифтов, на которые они получили лицензионные права от типографов - отсюда и стоимость подписки.

Вы можете поступить так, как предлагает Айлин, если найдете бесплатные шрифты, которые не имеют таких лицензионных ограничений, или вы можете приобрести шрифты WOFF, которые лицензированы специально для использования в Интернете и которые также сжаты для более быстрой загрузки. В качестве альтернативы вы можете преобразовать шрифты TrueType / OpenType в WOFF и использовать любой шрифт, который вы хотите, независимо от законности.

Однако Typekit встраивает шрифты путем встраивания их непосредственно в CSS:

@font-face {
    font-family: "bello-pro-1";
    src: url(data:font/woff;base64,...=);
    font-style: normal;
    font-weight: 400;
}

- где ... - это файл WOFF, закодированный в Base64. Вы также можете сделать это самостоятельно, если приобретете шрифт WOFF.

В WOFF нет встроенного DRM, поэтому я не уверен, что побудило литейщики шрифтов внезапно использовать веб-шрифты через WOFF, но из того, что я прочитал от нескольких дизайнеров шрифтов, похоже, что здесь могут быть некоторые фундаментальные непонимание того, как работают веб-страницы и что на самом деле подразумевает политика «одинакового происхождения».

Я представляю, что они просто встраивают шрифты вот так:

@font-face {  
  font-family: " your FontName ";  
  src: url( /location/of/font/FontFileName.eot ); /* IE */  
  src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  

/* THEN use like you would any other font */  
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;  
}  

http://randsco.com/index.php/2009/07/04/p680

Я протестировал это и это работает для IE8, FF, Chrome и Safari на Windows.