Делаем красивые шрифты на сайте WordPress
Восприятие интернет-пользователем сайта во многом зависит от используемых шрифтов. К сожалению, стандартная коллекция шрифтов ограничена, что не позволяет сделать сайт действительно красивым.
Но есть выход — использование шрифтов из коллекции Google Fonts. Сервис позволяет использовать для оформления сайта или блога шрифт, даже если он не установлен на компьютере пользователя. Сейчас мы рассмотрим, как добавить любой шрифт Google Fonts в вашу тему WordPress.
Есть несколько способов сделать это, мы рассмотрим два из них.
Простой способ как добавить шрифты для WordPress:
1. Заходим на сайт библиотеки шрифтов, где выбираем подходящий шрифт;
2. Под выбранным шрифтом находится кнопка Quick-use. Нажимаем на нее:
3. После клика вы будете перемещены на другую страницу, где будет форма «Add this code to your website»:

4. Откройте текстовый редактор и скопируйте в него полученный код, его мы и будем использовать для вставки шрифта на сайт.
5. Далее открываем папку с темой, ищем файл под названием style.css и вставляем в него полученный код:
[php]
@import url(http://fonts.googleapis.com/css?family=Squada+One);
[/php]
Данный метод является простым и часто используемым, но имеет недостатки. При использовании метода @import сайт не будет загружать содержимое сайта до тех пор, пока не файл шрифта не будет загружен полностью. Это снизит показатели производительности и скорости сайта.
Особенно ощутимо падение производительности будет при использовании нескольких шрифтов.
Стандартный способ добавления шрифтов:
Следующий метод является более трудоемким, но не влияет на производительность ресурса. Он заключается в использовании ссылок.
- Нам понадобятся ссылки, полученные в шаге 3 предыдущей инструкции.
- Ищем в папке с темой файл header.php и добавляем в него код:
[php]<link href=’http://fonts.googleapis.com/css?family=Squada+One’ rel=’stylesheet’ type=’text/css’>[/php]
- В нужном файле css добавляем код с выбранным шрифтом:
[php]h1 {
font-family: ‘Squada One’, Helvetica, Arial, serif;
}[/php]
Преимущество второго метода — запрос к шрифту отправляется на ранней стадии загрузки сайта, благодаря чему не оказывается влияние на скорость его загрузки.
Напишите ответ
Для отправки комментария вам необходимо авторизоваться.
Уважаемый автор, хотела бы переспросить по поводу шрифтов. Я слышала, что значительная часть шрифтов могут нормально отображаться в одних браузерах и поплыть в других. Полностью стандартными шрифтами пользоваться не очень хочется, все таки шрифт значительно влияет на общий дизайн сайта. Как мне быть уверенной, что те шрифты которые я выберу, меня не подведут?
[USER=405]@lusia[/USER], Тут тока тестировать надо понравившийся шрифт и смотреть во всех браузерах нормально или нет.
Ой, а как же я смогу в ручную все перелопатить…
Наверно же есть какие-то специальный тест программы, для этих целей.
Может Вы поможете в этом вопросе и дадите хорошую ссылку, где скачать.
[USER=405]@lusia[/USER], Собственно в статье и написано где смотреть шрифты, там и демо есть. Стандартных и гуголовских шрифтов по мне достаточно для выражения своей фантазии. А с сторонними шрифтами я бы не советовал сильно изготовятся.
Приветствую!
А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.
И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?
Спасибо!
[USER=3092]Васявася[/USER], посмотреть используемый шрифт можно через исходный код сайта. Так же есть удобное расширение для браузеров firebug.
Конечно в премиум темы шрифты не поддерживаемые кириллицу. Удобнее заменять их на шрифты от гугла https://fonts.google.com/
[QUOTE="Васявася, post: 4313, member: 3092"]Приветствую!
А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.
И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?
Спасибо![/QUOTE]
Так ну начну по порядку:
Права на шрифт. — Шрифты это одна из головных болей веб-мастер т.к. некоторые шрифты имеют ограниченный ореол обитания сайтов, на которых они могут быть, это может быть шрифт разработанный конкретно под сайт или купленный у дизайнерского агенства. И перед использованием шрифта стоит убедится имеет он ограниченное распространение или в свободном доступе. Будет печально сверстать сайт под определенный шрифт и добиться лаконичной страницы, а потом, получить письмо о нарушении АП.
Можно поискать бесплатные шрифты тут и тут.
Определить шрифт. — Определить шрифт можно через CSS сайта, для этого следует:
Кросбраузерность шрифта. — Я из бородатого поколения, когда следовало поддерживать ИЕ6, да и в принципе учитывая истеричность ослика, рекомендую в CSS подключать шрифт в 2х форматах .eot и .ttf, случается так, что шрифт подключен правильно, но он не отображается в каких либо браузерах, и как показала "съеденная собака", некоторые форматы шрифтов браузеры не поддерживают.
Сейчас сталкивался с тем. что пихают на сайты форматы: woff2, woff, svg. На счет крайнего скажу да это действительно круто использовать шрифты SVG да и вообще все. чо с ним связано, но для визитки достаточно тех форматов, что привел выше.
У меня к примеру регистрация шрифта выглядит так:
[CSS]@font-face { font-family: 'gothic'; src: url('css/gothic.eot#') format('eot'), url('css/gothic.ttf') format('truetype'); font-weight: normal; font-style: normal;}[/CSS]
И далее я использую вызов зарегистрированного шрифта:
[CODE]body { font-family: ‘gothic’;}[/CODE]
Локализация шрифта. — Бывало такое, находите на буржуйском сайте клевый макет, вытаскиваете из него шрифт.. а он на русском обычный Times new roman Calibri, так вот, к чему это я, есть урезанные шрифты, то есть если погуглить по названию, можно найти полную версию с кириллическими буквами. Если совсем шрифт не имеет русскоязычных аналогов следует поискать альтернативный шрифт.
Лично я проверяю написав русский и английский алфавит, устанавливаю шрифт и применяю его на написанное т.к. встречал, что некоторых букв нет и я долго воевал с кракозяброй в шрифте пока не понял, что это не ошибка кодировки, а ошибка в шрифте.
Советы по читабельности. — Ряд рекомендаций, которые следует применять при создании страницы сайта:
[QUOTE="Васявася, post: 4313, member: 3092"]Приветствую!
А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.
И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?
Спасибо![/QUOTE]
Для Google Chrome — Type Sample
Для Google Chrome, Safari, Firefox и Яндекс-браузер — WhatFont
Все эти дополнения к браузерам легко определят название шрифта и его размер.
тест