🐿️ [5 шагов] Быстро добавьте Fantastic Font Squirrel типы на ваш сайт

  1. Шаг 1: найдите шрифт FontSquirrel, который вы хотите добавить
  2. Шаг 2: Загрузите комплект FontSquirrel WebFont
  3. Шаг 3: Загрузите файлы Font Squirrel на свой сайт
  4. Шаг 4. Добавьте гарнитуру в таблицу стилей CSS.
  5. Шаг 5: Измените объявления CSS, чтобы использовать добавленные элементы FontSquirrel

В современном веб-дизайне шрифты довольно легко вернуть в отличие от первых дней Интернета - благодаря таким сайтам, как Font Squirrel В современном веб-дизайне шрифты довольно легко вернуть в отличие от первых дней Интернета - благодаря таким сайтам, как Font Squirrel. Хотя раньше возможности ограничивались несколькими шрифтами, которые должен был использовать каждый, сегодня доступно гораздо больше вариантов, поскольку они больше не ограничиваются файлами, доступными на компьютере. Шрифты могут быть загружены на лету пользователем, получающим доступ к веб-сайту, и отображаться на лету.

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

Сегодня вместо стандартных шрифтов, таких как Arial, Calibri и Helvetica neue, поскольку они наиболее доступны, мы можем использовать правило CSS @ font-face, которое позволяет нам использовать любой шрифт без необходимости устанавливать его на компьютер посетителя.

Прочитайте больше: Как выучить CSS (Smashing Magazine)

Это позволило чрезвычайно легко добавить Font Squirrel и любые другие шрифты на ваш сайт.

В этом уроке мы покажем вам, как использовать наборы FontSquirrel на вашем веб-сайте. Вы можете использовать ту же концепцию, чтобы добавить любой шрифт на ваш сайт, включая FontAwesome.

Шаг 1: найдите шрифт FontSquirrel, который вы хотите добавить

  • Визит FontSquirrel и нажмите Найти, чтобы найти элемент, который вы хотите добавить.
  • Просматривайте, выберите тот, который вы хотели бы использовать на своем сайте как часть вашего веб-дизайн , Вы можете использовать различные категории, чтобы найти шрифт, который вы хотите использовать, найти самые популярные, недавно добавленные, горячие или популярные дополнения. Есть тысячи на выбор, поэтому выберите тот, который лучше всего подходит для проекта, над которым вы работаете.

Есть тысячи на выбор, поэтому выберите тот, который лучше всего подходит для проекта, над которым вы работаете

Шаг 2: Загрузите комплект FontSquirrel WebFont

  • После того, как вы выбрали тот, который хотите использовать, нажмите на белку WebFont Kit в правом верхнем углу

  • Нажмите Скачать @ font-face kit

Загружаемый файл будет содержать zip-файл с несколькими файлами, включая использование веб-шрифта, любые лицензии, связанные с этой гарнитурой Font Squirrel, и, конечно, сам файл.

Шаг 3: Загрузите файлы Font Squirrel на свой сайт

  • Извлеките файл - он будет извлечен в папку с названием выбранного вами элемента
  • Загрузите ВСЕ файлы в папку CSS вашего сайта. У вас будет несколько файлов, которые вам нужно загрузить, в том числе. Вы также можете выбрать загрузку файлов в определенную папку, скажем, ТИПЫ
  1. имя_шрифта-webfont.eot,
  2. имя_шрифта-webfont.svg,
  3. имя_шрифта-webfont.ttf,
  4. имя_шрифта-webfont.woff,
  5. stylesheet.css

css

Шаг 4. Добавьте гарнитуру в таблицу стилей CSS.

Последний шаг будет немного отличаться в зависимости от того, как используются шрифты на вашем сайте. В большинстве случаев вы найдете определения шрифта в файле CSS. Вы должны найти файл CSS, используемый на вашем сайте, и добавить туда файлы FontSquirrel, используя следующее. Чаще всего файл для CSS называется stylesheet.css

  • Добавьте следующее в таблицу стилей, заменив

@ font-face {font-family: 'FontName'; src: url ('FontName-webfont..eot'); Формат src: url ('FontName-webfont..eot? #iefix') ('embedded-opentype'), формат url ('FontName-webfont.woff') ('woff'), url ('FontName-webfont.ttf) ') формат (' trueetype '), url (' FontName-webfont.svg # FontName ') формат (' svg '); Вес шрифта: нормальный; стиль шрифта: нормальный; }

Если вы загрузили шрифты в папку TYPES, код будет слегка изменен на:

@ font-face {font-family: 'FontName'; src: url ('types / FontName.eot'); формат src: url ('types / FontName.eot? #iefix') ('embedded-opentype'), формат url ('types / FontName-webfont.woff') ('woff'), url ('types / FontName- webfont.ttf ') формат (' trueetype '), url (' types / FontName-webfont.svg # FontName ') формат (' svg '); Вес шрифта: нормальный; стиль шрифта: нормальный; }

Шаг 5: Измените объявления CSS, чтобы использовать добавленные элементы FontSquirrel

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

Обновите объявление CSS, указав имя FontSquirrel, которое вы скачали.

h1, h2, h3, h4, h5, h6 {цвет: # 444; текстовое оформление: нет; семейство шрифтов: 'FontName', без засечек; }

Конечно, вы можете использовать семейство шрифтов в любом теге CSS, который вам нужен.

Если вы выполнили все вышеперечисленные шаги правильно, после перезагрузки таблицы стилей у вас должен появиться новый тип Font Squirrel, который вы только что добавили на свой сайт!

Если нет, просто вызовите инструменты разработчика chromes, чтобы проверить, правильно ли обращаются ко всем файлам. Это покажет как 404 ошибки.

Eot?
Eot?