X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Подключение сторонних шрифтов к сайту

Приклад
  • 2024-03-19
  • 5814 переглядів

  • Дизайн та розробка сайту

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

Значит у Вас есть сайт и Вы задались вопросом подключения шрифтов к нему. Кстати, если вас интересует вопрос о регистрации домена и Вы серьезно задумались о том, чтобы обзавестись сайтом, то думаю Вам интересно будет прочитать статью - Как зарегистрировать домен. И так, что нужно, чтобы осуществить подключение?

Подключение шрифта

1. Найти шрифт

Главная и самая не простая задача! Шрифтов много, а идеальный только один и его нужно найти. К тому же не все шрифты будут идеально подходить к Вашему сайту. Очень важно, чтобы шрифт подходил по стилю сайта. Второй фактор, это читабельность. Есть такие шрифты, которые при большом размере еще можно прочитать, но при размере 12-14 пикселей, это попросту невозможно. На крайний случай такие шрифты лучше использовать максимум для вывода заголовков типа h1. Есть еще один момент. Шрифты как и многое другое, может быть чьей-то собственностью и кто-то может заявить на него свои права. Если не хотите иметь проблем с авторскими правами, используйте только бесплатные шрифты или покупайте.

2. Формат шрифта

Чаще всего шрифты идут в формате TTF. Такой формат использует операционная система windows. Первым из браузером его понимает Firefox. Но для того чтобы все браузеры отображали корректно, шрифт должен быть в нескольких расширениях. Чтобы знать какие расширения поддерживают разные браузеры.

- Любая версия Internet Explorer понимает шрифт типа - EOT;
- Firefox начиная с версии 3.5 понимает – TTF и OTF (а с версии 3,6 научился понимать WOFF);
- Opera, начиная с 10 версии, работает с - TTF и OTF шрифтами;
- Все версии GoogleChrome понимают SVG шрифты, но в 2010 г научился читать всеми любимые TTF и OTF;
- В Safari, начиная с версии 3.2, работает с TTF и OTF шрифтами.

3. Подключение шрифта

Подключить шрифт можно двумя способами.

  • 1. Подключить шрифт разместив его у себя на сайте.
  • 2. Подключить шрифт со стороннего сервиса.

И так рассмотрим первый способ. Нужно сразу искать шрифты, которые идут полным комплектом с разными расширениями. Если же вам нравится шрифт, а он идет только в формате TTF, то можно использовать сервис для генерации шрифтов.

Для начала создайте папку на сайте - в теме сайта, шаблоне или просто в корне. Назовем ее к примеру font. Туда надо положить файлы шрифта с разными расширениями как это было описано выше. Например мы используем шрифт - helioscond-webfont. В папке должно лежать три файла.

  • helioscond-webfont.eot
  • helioscond-webfont.ttf
  • helioscond-webfont.woff

И так, чтобы подключить шрифт, нужно прописать строки кода в Ваш файл стилей. за частую это файл style.css. Если у Вас другой, то в него. В самом верху добавляем следующее

@font-face {
    font-family: 'helioscondregular';
    src: url('font/helioscond/helioscond-webfont.eot');
    src: url('font/helioscond/helioscond-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/helioscond/helioscond-webfont.woff') format('woff'),
         url('font/helioscond/helioscond-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

Во второй строке, задаем имя шрифта и потом если какому-то классу или id задать стиль с использованием данного шрифта просто прописываем данную строку с названием шрифта.
Пример:

#footer{
	background: #1982d1;
	padding:32px 25px 0;
	margin:0;
	font-family: helioscondregular;
	}

Далее идет подключение каждого файла с разным расширением, чтобы все браузеры понимали что от них хотят, так сказать, задаем кроссбраузерность.
В конце указываем стиль шрифта. В данном случаи, это нормальный - normal. Бывает еще - bold и light или regular. Если у Вас все или несколько, то для каждого прописывается повторно. Также обратите внимание на путь. У меня папка font лежит в том же каталоге что и файл стилей, поэтому в стилях путь

font/helioscond/helioscond-webfont.eot

Если у Вас другой путь, то корректно укажите его.
Таким образом, будет подключен шрифт, который лежит на Вашем сайте.

Второй способ, это подключение шрифта с стороннего сервиса. Для примера выберем google шрифты, которые можно найти здесь - google.com/webfonts

Подключение со стороннего сервиса, тоже осуществляется тремя способами.

Первый через элемент link в шапке Вашего сайта перед закрывающимся тегом head. Строка будет иметь примерно следующий вид.

<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Второй вариант, через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.

@import url(https://fonts.googleapis.com/css?family=Cuprum&subset=latin,cyrillic);

Третий вариант, с помощью javascript. Каки в первом варианте подключаем скрипт.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Cuprum::latin,cyrillic' ] }
  };
  (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);
  })(); </script>

В стилях к классу или айди указываем - font-family: 'Cuprum', sans-serif; В нашем примере это шрифт Cuprum.

У способа подключения шрифтов через сторонний сервис, есть свои плюсы

  • Шрифты являются бесплатными в использовании, проблем с авторскими правами не будет.
  • Шрифты оптимизированы уже для работы на сайтах и имеют малый объём.
  • Определение браузера осуществляется автоматически и под него выдаётся шрифт в нужном формате.

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

На этом все. Спасибо за внимание 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 5, в среднем: 5 из 5
Читайте також