Речі змінилися з тих пір, як це питання було спочатку задано та відповідено. Проведено великий обсяг роботи над тим, щоб вбудовувати шрифт між браузерами, щоб основний текст працював за допомогою вбудовування @ font-face.
Пол Ірландський склав синтаксис Bulletproof @ font-face, поєднуючи спроби кількох інших людей. Якщо ви насправді проглядаєте всю статтю (а не лише верхню), це дозволяє одному висловленню @ font-face охоплювати IE, Firefox, Safari, Opera, Chrome та, можливо, інші. В основному це може подавати OTF, EOT, SVG та WOFF способами, які нічого не порушують.
Вилучено з його статті:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
Працюючи з цієї основи, Font Squirrel зібрав безліч корисних інструментів, включаючи генератор @ font-face, який дозволяє завантажувати файл TTF або OTF та отримувати автоматично перетворені файли шрифтів для інших типів, а також попередньо побудований CSS та демонстраційна HTML-сторінка. Font Squirrel також має сотні наборів @ font-face .
Soma Design також створив FontFriend Bookmarklet , який перевизначає шрифти на сторінці на льоту, щоб ви могли спробувати щось інше. Він включає підтримку перетягування @ font-face у FireFox 3.6+.
Зовсім недавно Google почав надавати веб-шрифти Google - асортимент шрифтів, доступних за ліцензією з відкритим вихідним кодом та обслуговуваних із серверів Google.
Обмеження ліцензії
Нарешті, WebFonts.info склав гарний список шрифтів, доступних для вбудування @ font-face на основі ліцензій. Він не претендує на вичерпний список, але шрифти в ньому повинні бути доступними (можливо, з такими умовами, як атрибуція у файлі CSS) для вбудування / зв’язування. Важливо прочитати ліцензії , оскільки є деякі обмеження, які, очевидно, не просуваються вперед при завантаженні шрифтів.