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

Question

Мой сайт использует шрифт ff-clifford-eighteen-web-pro-1. Я хочу, чтобы весь мой текст отображался с использованием этого шрифта даже для пользователей, у которых он не установлен на их компьютере.

Возможно ли это?

Answer 1

Вы можете использовать генератор @ font-face. Он позволяет вам загружать ваши шрифты и создает отличную загрузку .zip с CSS и все связанные файлы, необходимые для того, чтобы ваш собственный шрифт работал на вашем сайте.

http://www.fontsquirrel.com/fontface/generator

У них также есть множество лицензионных шрифтов, готовых к использованию на вашем сайте:

http://www.fontsquirrel.com/fontface

Еще один замечательный сайт, позволяющий «арендовать» лицензионные шрифты, - это TypeKit.

http://typekit.com/

Answer 2

Вы не можете. Если шрифт отсутствует в системе, в которой находится браузер, шрифт не будет найден и не может быть загружен.

Вам потребуется распространить шрифт на клиентские системы (если у вас есть лицензия для этого).

Answer 3

Я использую Куфон . Прекрасно работает, но вы также должны проверить лицензирование.

Answer 4

Краткий ответ: вы не можете

Длинный ответ: вы могли бы, но это не легко и не широко поддерживается. Прочитайте эту статью для получения дополнительной информации.

Answer 5

Если шрифт хранится в папке шрифтов (например: fontFolder ), вы должны использовать генератор @ font-face , чтобы автоматически загружать шрифт, чтобы он отображался где бы на сайте вы ни указали. Ниже fontFolder представляет каталог (папку), в которой находятся файлы шрифтов, а fontName представляет имя шрифта (внутри fontFolder ). Если у вас есть варианты шрифта .eot .tff .woff и .svg, хранящиеся в fontFolder , вы можете скопировать приведенный ниже код в верхнюю часть таблицы стилей и заменить fontFolder с именем вашего собственного каталога и замените fontName на имя вашего шрифта:

@font-face {

  font-family: "fontName";

  src: url('fontFolder/fontName.eot');

  src: url('fontFolder/fontName.eot?#iefix') format('embedded-opentype'), 

  url('fontFolder/fontName.woff') format('woff'), 

  url('fontFolder/fontName.ttf') format('truetype'), 

  url('fontFolder/fontName.svg')format('svg');
}

Когда вы будете готовы использовать свой шрифт, просто используйте его имя:

h1 {
    font-family: yourFont;
}

Answer 6

Вот ссылка на Миллион способов встраивать пользовательские шрифты (и держать типографских ботаников за спиной)

Он рекомендует sIFR3