Делаем красивые шрифты на сайте WordPress



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

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

Есть несколько способов сделать это, мы рассмотрим два из них.

Простой способ как добавить шрифты для WordPress:

1. Заходим на сайт библиотеки шрифтов, где выбираем подходящий шрифт;
2. Под выбранным шрифтом находится кнопка Quick-use. Нажимаем на нее:

fonts2 fonts1



3. После клика вы будете перемещены на другую страницу, где будет форма «Add this code to your website»:

fonts2

4. Откройте текстовый редактор и скопируйте в него полученный код, его мы и будем использовать для вставки шрифта на сайт.

5. Далее открываем папку с темой, ищем файл под названием style.css и вставляем в него полученный код:

@import url(http://fonts.googleapis.com/css?family=Squada+One);

Данный метод является простым и часто используемым, но имеет недостатки. При использовании метода @import сайт не будет загружать содержимое сайта до тех пор, пока не файл шрифта не будет загружен полностью. Это снизит показатели производительности и скорости сайта.

Особенно ощутимо падение производительности будет при использовании нескольких шрифтов.

Стандартный способ добавления шрифтов:

Следующий метод является более трудоемким, но не влияет на производительность ресурса. Он заключается в использовании ссылок.

  1. Нам понадобятся ссылки, полученные в шаге 3 предыдущей инструкции.
  2. Ищем в папке с темой файл header.php и добавляем в него код:
    <link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'>
  3. В нужном файле css добавляем код с выбранным шрифтом:
    h1 {
        font-family: 'Squada One', Helvetica, Arial, serif;
    }

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


Понравилась статья? Поделись с друзьями:
Комментариев: 8
  1. Уважаемый автор, хотела бы переспросить по поводу шрифтов. Я слышала, что значительная часть шрифтов могут нормально отображаться в одних браузерах и поплыть в других. Полностью стандартными шрифтами пользоваться не очень хочется, все таки  шрифт значительно влияет на общий дизайн сайта. Как мне быть уверенной, что те шрифты которые я выберу, меня не подведут?

  2. Garri (автор)

    @lusia, Тут тока тестировать надо понравившийся шрифт и смотреть во всех браузерах нормально или нет.

  3. Ой, а как же я смогу в ручную все перелопатить...

    Наверно же есть какие-то специальный тест программы, для этих целей.

    Может Вы поможете в этом вопросе и дадите хорошую ссылку, где скачать.

  4. Garri (автор)

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

  5. Васявася

    Приветствую!


    А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.


    И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?


    Спасибо!

  6. Garri (автор)

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


    Конечно в премиум темы шрифты не поддерживаемые кириллицу. Удобнее заменять их на шрифты от гугла  https://fonts.google.com/

  7. Di Ost

    Приветствую!


    А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.


    И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?


    Спасибо!


    Так ну начну по порядку:


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

    Можно поискать бесплатные шрифты тут и тут.


    Определить шрифт. - Определить шрифт можно через CSS сайта, для этого следует:

    1. На странице открыть её код ( Сочетание Ctrl + U во всех браузерах )
    2. Найти главный файл стилей ( В коде выглядит примерно так: <link type="text/css" rel="stylesheet" href="Ссылка_на_CSS_файл_формата.css"/> )
    3. Перейдя в CSS посмотреть какие шрифты зарегестрированы ( @font-face { текст с ссылками на файлы шрифта. } )
    4. Стянуть с сайт нужный шрифт.


    Кросбраузерность шрифта. — Я из бородатого поколения, когда следовало поддерживать ИЕ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]

    И далее я использую вызов зарегистрированного шрифта:

    body { font-family: 'gothic';}


    Локализация шрифта. — Бывало такое, находите на буржуйском сайте клевый макет, вытаскиваете из него шрифт... а он на русском обычный Times new roman Calibri, так вот, к чему это я, есть урезанные шрифты, то есть если погуглить по названию, можно найти полную версию с кириллическими буквами. Если совсем шрифт не имеет русскоязычных аналогов следует поискать альтернативный шрифт.

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


    Советы по читабельности. — Ряд рекомендаций, которые следует применять при создании страницы сайта:

    • Длина строки должна варьироваться в предела 80 символов. ( Человек ленивое существо и если интуитивно видит много букв в строчку, он не будет читать, даже если там ценная информация. )
    • Белый фон, серые буквы — до сих пор остается идеальным сочетанием, пригодным для чтения. И как бы я не любил создавать темный дизайн, белый шрифт на черном фоне читается менее охотно. ( Серые буквы — имеется в виду чисто черный он давит, но стоит от идеально черного #000000 отойти в серую сторону и шрифт с цветом #1E1E1E будет приятно читаться. )
    • Два основных размера — избегайте радугу размеров шрифта, на сайте должно быть два основных размера, большой который используется для заголовков и обычный читабельный.
    • Группа стандартов шрифта — что бы не вдаваться во все нюансы разделю шрифты на художественные ( которые красивые но сложночитаемые ) и технические ( легко читаемые но более простые ). Для сайта следует использовать технические.
    • Междустрочный интервал — следует устанавливать свой интерлиньяж, я обычно ставлю чуть больше чем стандартный, и текст сразу получает объем. ( line-height: 1.1; )
    • Красная строка — каждый абзац должен иметь небольшую красную строку, текст воспринимается совсем по другому. ( p { text-indent: 20px; } )
    • Грамматика — отслеживайте грамматические и синтаксические ошибки в тексте
  8. Приветствую!


    А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.


    И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?


    Спасибо!


    Для Google Chrome — Type Sample

    Для Google Chrome, Safari, Firefox и Яндекс-браузер — WhatFont


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

Добавить комментарий
Screenshot.png
Общаясь и проявляя активность в Клубе по WordPress

можно зарабатывать монеты и получить доступ в закрытый раздел