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

Дата: 18 липня 2013 Рубрика: Технічні поради по WP Коментарі: 4 коментарі

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

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

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

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

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

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

Для цього відкриваєте файл header.php Вашого шаблону та між тегами

, в будь-якому місці вставляєте наступний рядок виклику шрифту:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шануйтеся!


З повагою, Олег Волощук.

Бажаєте мати свій власний блог на WordPress?

Отримайте АБСОЛЮТНО БЕЗКОШТОВНО детальний відеокурс і вперед!

Ваш E-Mail 100% в безпеці!

 

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

  1. MrVigner коментує:

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

    загалом корисні сервіси гугл напридумував)

  2. serpiko коментує:

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

Залишити свій коментар

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Google + фейсбук Вконтакті Twitter RSS
Категорії
  • Інтерв’ю (4)
  • Конкурси (5)
  • Оголошення (10)
  • Особисте (18)
  • Плагіни для Wordpress (15)
  • Саморозвиток (7)
  • Технічні поради по WP (19)
Канал на YouTube
Соціальні спільноти
  • Вконтакті
  • OK
  • Facebook
Кращі коментатори
Віктор Х.(14)
fedun(9)
Володими.(5)
ML(5)
Pavlofox(4)
Саша(4)
Світлана(4)
Cyber(3)
запитів / генер. стор. / спож. пам'яті
54 / 0.409 / 58.69mb
Вгору