Відкрити меню

Каталог веб-шрифтів Google Fonts в допомогу блогерам та розробникам

Вітаю, товариство! Хто хоча б трішки стикався з створенням блогів, шаблонами, редагуванням WordPress тем під свої потреби, той знає, що є одна велика “біда” в блогера – це шрифти заголовків H1, H2, H3 і т.д.  Все що міг зробити власник ресурсу, в плані дизайну та зовнішнього вигляду цих заголовків – танцювати в рамках стандартних Arial, Verdana, Times New Roman, Georgia, Tahoma і фактично все. Можна було б відкрити Photoshop, хто ним володіє, та намалювати шикарний текст, але це для банера, хедера … а що робити з заголовками статей та сторінок? Як вирватися з тенет декількох стандартних шрифтів і надати своєму ресурсу неповторний та оригінальних зовнішній вигляд?

Шрифти Google Fonts

Відверто кажучи, про цей інструмент я чув давно, але скористатись вирішив тільки нещодавно, коли довелось працювати над дизайном одного проекту. Скористався і пожалкував, що руки не доходили до Google Fonts раніше. В старій версії цього каталогу шрифтів було 180 видів, а в новій версії їх стало 629! Величезний набір класних, оригінальних, стильних веб-шрифтів, які можна спокійно використовувати для формування власного дизайну свого блогу.

Величезний плюс в тому, що їх не потрібно кудись завантажувати, десь встановлювати, а просто скористатись каталогом і підключити обраний шрифт до свого ресурсу. Як це зробити? Все дуже просто і в цій статті я покажу Вам все детально та покроково.

Отже, ідемо на сервіс Google Fonts та милуємось асортиментом та можливістю вибору. Сам процес пошуку шрифтів я не буду Вам описувати, там все просто, пройдіться по категоріях, пограйтеся з розмірами та іншими параметрами, оберіть той шрифт, який Ви бажаєте використовувати для своїх заголовків (як приклад) і скопіюйте його назву (клікабельно).

Обираємо потрібний шрифт

Тепер нам потрібно цей шрифт від Google підключити до свого ресурсу, щоб при відкритті сторінки він завантажувався з бібліотеки Google Fonts.

Для цього відкриваєте файл header.php Вашого шаблону та між тегами <head></head>, в будь-якому місці вставляєте наступний рядок виклику шрифту:

де Parisienne – назва самого шрифту. Звичайно, що в кожному рішенні є свої особливості та нюанси, тому давайте спробуємо розглянути всі.

Можуть виникнути ситуації, коли Ви захочете підключити не один шрифт, а два чи три, в такому випадку рядок виклику буде виглядати наступним чином:

Зверніть увагу, що самі шрифти розділені між собою вертикальним слеш (|), а якщо в назві обраного шрифту присутній пробіл, то в рядку виклику цей пробіл ми замінюємо на (+). Таким чином, на цьому прикладі, підключено два види шрифтів: Parisienne та Chela One.

Як відомо, в кожному шрифті є певні стилі – це жирний, курсив, жирний курсив і т.д. В такому випадку ми до назви шрифту додаємо ці стилі і вказуємо, що підключаються різні стилістичні форми одного виду шрифту. Рядок виклику буде такий:

де після назви шрифту ми ставимо дві крапки і вказуємо, які стилі цього сімейства підключаються.

Врахуємо ми і коники відомого браузера Опера, який проблематично ставиться до таких шрифтів (наскільки я зрозумів – це пов’язано з кириличними і латинськими варіантами). Тоді ми примусово скажемо, саме для Опери, як відображати наші шрифти.

Тут ми змушуємо браузер примусово правильно показувати відвідувачам кириличний варіант Google Fonts.

Можна скористатись і таким варіантом лінку:

якщо назви наших заголовків будуть зустрічатися в різних варіаціях – латина та кирилиця.

Ось що стосується підключення функції виклику шрифтів Google Fonts з бібліотеки самого Гугла. А що далі? Як змінити стиль заголовків на нашому блозі? Складного тут немає нічого, ми чинимо так само, як і у випадках звичайного редагування, просто вказуємо вже підключений шрифт.

Наприклад, я хочу змінити стиль заголовка статті H2. Просто іду в файл стилів своєї теми, шукаю стиль для H2 та прописую підключений шрифт, який береться в одинарні лапки.

Щоб показати на прикладі всю принадність використання бібліотеки Google Fonts, я продемонструю Вам реальні зміни на одному проекті.

Дивіться, ось так виглядає заголовок статті звичайним шрифтом Verdana.

До використання Google Fonts

Строго, по-діловому, але … сухо якось і не привабливо. А ось що вийшло після використання обраного шрифту для цього заголовка.

Після використання Google Fonts

Різниця разюча і про переваги використання веб-шрифтів Google Fonts більше можна і не говорити, правда?

Отже, підсумуємо. Вам потрібно зробити всього три кроки:

1. В бібліотеці Google Fonts обрати бажаний шрифт.

2. Підключити шрифт в header.php за допомогою вище приведених прикладів.

3. Змінити в файлі стилів шрифт обраного заголовка.

Все, далі залишається тільки насолоджуватись зовнішнім виглядом свого блогу – експериментуйте.

Якщо виникатимуть труднощі – пишіть в коментарях, розберемось.

Бажаю Вам вдалого дня та чудового настрою!

Шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 5, середній: 5,00 з 5)
Loading...
Обговорення: 8 коментарів
  1. MrVigner сказав:

    Я з гуглівськими шрифтами теж недавно познайомивсь. Коли підібрав шаблон для особистого блогу то зіткнувся з проблемою: дизайн був розрахований на латину і з нашими буквами не дружив. Шукавши альтернативні шрифти напоровсь гугловську бібліотеку)
    загалом корисні сервіси гугл напридумував)

    Відповіcти
    1. Олег Волощук сказав:

      На те він і Гугл. Все ж таки Яндексу далеко до Google.

      Відповіcти
  2. serpiko сказав:

    Олег, дякую. Дуже вчасно, – особливо для мене, стаття про шрифти.

    Відповіcти
    1. Олег Волощук сказав:

      На здоров’я, користуйтесь 🙂

      Відповіcти
  3. Саша сказав:

    Таким чином можна підключати шрифти не тільки для заголовків, а й для основного тексту статті?

    Відповіcти
    1. Олег Волощук сказав:

      Так, без проблем. Тут на блозі це так і реалізовано – змінені і заголовки, і основний текст статей.

      Відповіcти
  4. Денис сказав:

    Google Fonts не имеет украинских шрифтов, и в примере это учли!! Не очень хорошо, ведь украино язычные сайты буду использовать такие буквы как “і” и “ї” и “є”. Так что статья не полная…

    Відповіcти
    1. Олег Волощук сказав:

      Ну чому ж … я, наприклад, використовую в статтях шрифт від Гугл і літери “і”, “ї”, “є” чудово відображаються. Правда в тому, що не всі кириличні шрифти підтримують український алфавіт, але все ж таки є такі, які укр. літери чудово сприймаюсь 🙂

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google