Войти Регистрация

Вход на сайт

Логин *
Пароль *

Загружаем шрифты на свой сайт с помощью CSS

Понедельник, 25 августа 2014 15:13 Автор 

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

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

 

ttf (TrueType) Наиболее распространённые форматы, воспринимаемые многими конвертерами, что позволяет легко получить недостающие форматы шрифтов.  
otf (OpenType PostScript)
woff (Web Open Font Format) Как можно догадаться из названия, это формат именно для того, чтобы в будущем не было проблем с поддержкой разных форматов шрифтов. Поддерживается многими современными браузерами.
svg (Scalable Vector Graphics) Этот формат используется для iOS
eot (Embedded OpenType)) Исключительный, специальный (как всегда) формат для браузера Internet Explorer

 

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

Некоторые шрифты можно найти на ресурсе Google Web Fonts - данный сервис позволит автоматически сгенерировать код для подключения шрифтов. Если вам нужна поддержка кирилицы, не забудьте выбрать соответствующий фильтр.

google-fonts     google-fonts2

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


@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.otf");
}

@font-face {
src: url('../fonts/eurofontc.eot'); /* IE9 */
src: url('../fonts/eurofontc.eot?') format('eot'), /* IE6-IE8 */
}

@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.woff");
}

@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.svg");
}

@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.ttf");
}

 

Разумеется у вас будет свой путь до файлов шрифтов. Далее в стилях можно будет использовать ваш шрифт привычным способом, например так:

 

body {
color: #ccc;
font-family: eurofontc;
font-size: 18px;
}

 

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

Stanislav

Master's Degree

Сайт: skopil.ru
Авторизуйтесь, чтобы получить возможность оставлять комментарии

Новые статьи

  • Сбой при обновлении расширений Regular Labs
    Сбой при обновлении расширений Regular Labs

    Давно пользуюсь различными расширениями от студии Regular Labs, но недавно при очередном обновлении через панель администратора Joomla я получил ошибку обновления. При этом не все расширения выдавали такую ошибку. Разумеется, решение было найдено, делюсь :)

    Подробнее ...
  • Adobe Photoshop - чёрный экран при создании нового файла
    Adobe Photoshop - чёрный экран при создании нового файла

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

    Подробнее ...
  • Intel Dual Band Wireless-AC 7260. Ошибки.
    Intel Dual Band Wireless-AC 7260. Ошибки.

    Для тех, кто решил установить себе модуль WiFi/Bluetootth с поддержкой двух диапазонов WiFi от компании и столкнулся с ошибками Bluetooth код 43 или код 10, а также с отсутствием поддержки режима "ac" WiFi, собственно и пригодится данная статья, в которой я опишу решение данных проблем.

    Подробнее ...
  • RSForm прокрутка вверх страницы многостраничной формы
    RSForm прокрутка вверх страницы многостраничной формы

    Рассмотрим еще одно небольшое, но очень важное усовершенствование мощного конструктора форм RSForm для CMS Joomla. На этот раз затронем многостраничную форму, когда очень большая форма разбивается с помощью инструмента "Разделитель страниц" на несколько страниц с навигацией. Не расписываю как это делается, предполагается, что у нас уже есть подобная форма и нужно её немного поправить для лучшей визуализации.

    Подробнее ...
  • RSForm маска ввода телефона
    RSForm маска ввода телефона

    Столкнулся с очень интересным и мощным конструктором форм RSForm под управлением Joomla CMS. Кто хоть раз им пользовался понимает, что функционал данного конструктора сразу не освоить, а умеет этот компонент очень много! Не буду сильно расписывать данный конструктор, а перейду непосредственно к теме статьи. Хочу поделиться простым способом подключения ввода телефонного номера по определенной маске.

    Подробнее ...
  • Страница 404 ошибки в Joomla 3 с помощью пункта меню
    Страница 404 ошибки в Joomla 3 с помощью пункта меню

    Ранее в статье Страница 404 ошибки в Joomla 3.9 был описан способ подключения страницы с помощью штатного материала Joomla. Однако, это не всегда подходит, особенно в сложных шаблонах, где используются конструкторы контента. В данной статье речь пойдет о способе подключения страницы 404 используя пункт меню, что позволит подключить страницу в любом оформлении.

    Подробнее ...
  • Webasyst. Не работает локализация
    Webasyst. Не работает локализация

    Это статья для тех, кто пользуется системой управления Webasyst, и в один прекрасный момент наблюдает, что часть наименований становится на английском языке.

    Подробнее ...