Додавання спеціальних шрифтів до WordPress


Як додати спеціальні шрифти до WordPress


Вибір правильного шрифту для вашого сайту WordPress є центральною частиною веб-дизайну та брендингу веб-сайтів.

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

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

Ми висвітлимо все, що вам потрібно знати про шрифти WordPress:

  • A) Як додати спеціальні шрифти до WordPress (вручну)
  • B) Як додати спеціальні шрифти до WordPress (через плагін)
  • Навіщо використовувати спеціальні шрифти на WordPress
  • Де знайти власні шрифти
  • Висновок

Contents

A) Як додати спеціальні шрифти до WordPress вручну

Що стосується додавання користувальницьких шрифтів у WordPress вручну, у вас є три основні варіанти: HTML, JavaScript та CSS. У кожного методу є плюси і мінуси, і який із них є правильним, залежить від вашої установки. Не хвилюйтесь, ми детально розглянемо кожен з них.

1. Використання CSS та @import

Почнемо з найменш рекомендованого методу. Якщо ви плануєте встановити власні шрифти з Google Fonts, можливо, ви помітили, що на ній є вкладка @import. Сервіс надає вам частину CSS-коду.

імпорт вкладки в шрифти google

Ви можете або взяти його таким, яким він є, і вставити його у свій заголовок (докладніше про це нижче) або скопіювати без >дужки до початку теми вашої теми (а ще краще, дочірньої теми) style.css файл.

/ *
Назва теми: Двадцять сімнадцять дітей
Тема URI: https://wordpress.org/themes/twentyseventeen/
Шаблон: двадцять сімнадцять
Автор: команда WordPress
Автор URI: https://wordpress.org/
Версія: 1.0

* /

@import url ("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");


/ * додатковий CSS йде сюди * /

Це дозволить завантажити шрифт на ваш сайт із таблиці стилів. Це здається простим рішенням, правда? Чому це тоді найменш рекомендується?

Причина - проблеми з роботою. Використання @import більше не є рекомендованим способом, оскільки він заважає браузерам завантажувати декілька таблиць стилів одночасно. Наслідок: повільніше час завантаження сторінки. Тримайтеся подалі від нього, якщо можете.

2. Використання файлу шаблонів WordPress

Другий спосіб отримати шрифти на вашому сайті - це взяти код, наданий бібліотеками шрифтів, і скопіювати їх у свою header.php файл шаблону. У більшості стандартних тем WordPress є.

Обов’язково розмістіть його десь між і дужки. Таким чином, ваш шрифт завантажуватиметься щоразу, коли сторінка завантажується.

введіть код шрифтів google у заголовок wordpress

Якщо ви використовуєте дочірню тему, не забудьте скопіювати батьківську тему header.php занесіть у дочірній тематичний каталог і внесіть зміни там.

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

3. Використання @ font-face

Поки ми говорили лише про те, як використовувати власні шрифти в WordPress, які розміщені десь ще, а саме сервери Google та Adobe. Однак також можна розміщувати шрифти на власному веб-сайті та пропонувати їх веб-переглядачам відвідувачів.

Для цього спочатку потрібно завантажити відповідний шрифт. Пам'ятаєте кнопку завантаження в Google Fonts? Це зараз стане в нагоді. Інші постачальники також дозволяють завантажувати шрифти.

Коли ви зробите це, переконайтеся, що ви отримали його у форматі веб-шрифту. Це означає TTF, OTF або WOFF. Ви дізнаєтесь більше інформації про нього тут. Якщо у вас немає правильного формату веб-шрифту, ви також можете використовувати ця послуга конвертувати ваш шрифт у підтримуваний.

Після того, як у вас будуть готові файли шрифтів, вам потрібно завантажити їх на ваш сайт WordPress через FTP. Гарне місце для їх зберігання - у підкаталозі назви вашої дитини шрифти (креативний, ми знаємо).

Після цього вам потрібно завантажити шрифт у свій аркуш стилів через @ font-face. Ось як це виглядає:

@ font-face {
сімейство шрифтів: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
шрифт - нормальний;
}

Не забудьте замінити назву шрифту та адресу його розташування на власному веб-сайті. Після цього ваш новий спеціальний шрифт стане корисним.

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

4. Шрифти, що цікавляться, - "WordPress шлях"

Якщо ви дійсно хочете додати спеціальні шрифти до WordPress правильним способом, ви будете використовувати свої function.php файл (всередині каталогу поточно активної теми) та функція  wp_enqueue_script або wp_enqueue_style.

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

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

Наприклад, Google Fonts надає вам шрифти як таблиці стилів. У такому випадку ви додасте їх на свій сайт WordPress таким чином:

функція add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

addgery ('wp_enqueue_scripts', 'add_google_fonts');

На відміну від цього, шрифти з веб-шрифтів Adobe Edge надходять як JavaScript. Тому, щоб привласнити їх на своєму сайті, код виглядатиме так:

функція add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

добавлення ('wp_enqueue_scripts', 'add_adobe_fonts');

Це було не так складно, чи не так? Крім того, ви отримуєте додаткові бали за те, щоб зробити це WordPress способом.

5. Зателефонуйте до спеціальних шрифтів у своєму стилі

Тепер, коли шрифти були додані на ваш сайт, ви можете офіційно ними користуватися. Для цього все, що вам залишилося, - це додати декларацію для нового шрифту в таблицю стилів. Наприклад, щоб змінити шрифт для тегів заголовка, ви використовуєте щось подібне:

h1,
h2,
h3,
h4,
h5,
h6 {
сімейство шрифтів: 'Roboto';
}

Примітка: Зверніть увагу на те, як послуга, яку ви використовуєте, визначає CSS-декларацію для ваших шрифтів. На нашому тестовому сайті ми, здається, не змогли змусити веб-шрифтів Adobe Edge працювати, оскільки вони називають Open Sans у CSS за допомогою open-sans на відміну від "Відкрити не" в Google Fonts.

Це воно. Тепер ви знаєте, як додати спеціальні шрифти до WordPress вручну. Привітайте себе, це деякі знання наступного рівня! Очевидно, що такі ж дії можливі і за допомогою плагінів. Про це ми поговоримо далі.

B) Як додати користувацькі шрифти до WordPress за допомогою плагіна

Сфера WordPress не була б такою, якою вона є, якби не було декількох плагін-рішень для додавання спеціальних шрифтів на платформу. Ми переглянемо, як користуватися Легкі шрифти Google, який є одним з найпопулярніших плагінів у цій області.

1. Встановіть плагін

Перший крок - встановлення плагіна. Для цього перейдіть до Плагіни> Встановити нове. Потім знайдіть ім’я плагіна. У результатах пошуку натисніть на Встановити зараз і активуйте плагін, як тільки він з’явиться на вашому сайті.

2. Додати / змінити шрифти на своєму сайті

Коли плагін активний, ви знайдете новий пункт меню під назвою Типографія під Зовнішній вигляд> Налаштувати.

меню типографіки в програмі настройки WordPress

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

прості налаштування шрифтів google у налаштуваннях WordPress

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

легкі шрифти Google змінюють шрифт

Тут найважливіша частина - це підпис під Сімейство шрифтів. Тут ви можете вибрати новий тип шрифту з усієї бібліотеки шрифтів Google (використання Сценарій / підмножина щоб обмежити вибір шрифту тим, хто має спеціальні символи).

Шрифти впорядковуються стандартними, серифними, sans-serif, дисплеями, рукописними та монопростірними шрифтами. Однак ви також можете просто шукати їх по імені.

Натиснувши на шрифт, ви можете переглянути зміни в режимі реального часу праворуч.

змінили спеціальний шрифт у легких шрифтах Google

3. Налаштуйте шрифт

Після того, як ви вибрали шрифт, існує багато варіантів для подальшого налаштування друкарської форми.

Перш за все, ви можете змінити шрифт-вагу / стиль у однойменному меню. Це контролює товщину літер.

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

налаштування зовнішнього вигляду в легких шрифтах Google

Нарешті, Позиціонування дозволяє змінювати інші налаштування, такі як полів, прокладка, облямівка, радіус межі та показ.

налаштування позиціонування у легких шрифтах Google

Коротше кажучи, ви маєте змогу повністю настроїти шрифти на своєму сайті за своїм смаком. Легко, чи не так? Не забудь вдарити Зберегти та опублікувати вгорі, коли вас влаштовують зміни.

Що не робити, що мені робити?

Іноді ви не можете змінити деякі шрифти на своєму сайті. Зазвичай це відбувається, коли тема, яку ви використовуєте, має нестандартні класи CSS та селектори для їх стилізації.

Наприклад, у темі «Двадцять шістнадцять» заголовки публікацій блогу не просто визначені як H1, але також мають клас CSS, який називається .запис-назва. З цієї причини плагін не може їх змінити.

Для усунення цієї проблеми потрібно створити т. Зв контроль шрифту під Налаштування> Шрифти Google.

додати керування шрифтом у легких шрифтах Google

Ви можете асоціювати селектори CSS з новим керуванням та примусовою переоправою, коли це необхідно. Після цього новий елемент керування шрифтом доступний як додаткова опція у програмі WordPress Customizer під Тематична типографія. Простенька.

Інші спеціальні шрифти WordPress плагіни

Також доступні інші плагіни WordPress для додавання спеціальних шрифтів:

  • Використовуйте будь-який шрифт - Це допомагає використовувати завантажені шрифти без CSS. Він розміщує шрифти на власному сервері, а також пропонує інструменти перетворення форматів шрифтів.
  • Шрифти Typekit для WordPress - Використовуйте шрифти від Adobe Typekit послуга (яку потрібно зареєструвати). Це дозволяє вводити коди та вставляти CSS безпосередньо у плагін.
  • TK Google Fonts - Альтернативне рішення для вбудовування шрифтів Google, яке в значній мірі переносить досвід роботи з шрифтами Google на сервер WordPress. Спробуйте шрифти за допомогою попереднього перегляду та спеціального тексту, а потім змініть його всередині WordPress Customizer.

Навіщо використовувати спеціальні шрифти на своєму веб-сайті WordPress?

Друкарня сама по собі є наукою, і ми не зможемо дати вам повний курс із використання шрифтів у веб-дизайні. Зрештою, мова йде не лише про шрифт, а й його розмір, нахил, товщину та багато іншого. Однак ми може висвітліть, чому використання користувальницьких шрифтів на вашому сайті WordPress є хорошою ідеєю.

1. Типографія - частина першого враження

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

2. Шрифти мають набагато більший вплив, ніж ви думаєте

Це може вплинути на вашу здатність до навчання, запам’ятовування текстів і навіть вплине на ваш настрій.

Наприклад, в одному дослідження, зазначалося, що якщо ви хочете збільшити час, витрачений на читання якогось тексту, вам слід скористатися шрифтом "Сериф". Однак якщо ви хочете прочитати більше за короткий час, вам слід перейти до шрифту sans-serif.

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

Де знайти власні шрифти

1. Використовуйте шрифти Google для пошуку власної типографії

Перша послуга, яку ми розглянемо - це Google Шрифти. Як випливає з назви, це сервіс від Google, який пропонує 800+ різних шрифтів. Безкоштовний у використанні. Для всіх.

Ось як його використовувати:

2. Знайдіть правильний шрифт

Коли ви вперше перейдете на сторінку Шрифти Google (просто введіть її в Пошуку Google), це те, що ви побачите:

Як додати спеціальні шрифти в домашню сторінку шрифтів google WordPress

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

Якщо ні, ви можете фільтрувати шрифти різними способами, наприклад, за категоріями:

  • Серіф - Значення шрифтів із чітко вираженими лініями наприкінці, як Times New Roman.
  • Без зарубок - Прості шрифти без шпигунів, як Helvetica. Прикладом цього є шрифти, використані на цьому веб-сайті.
  • Дисплей - Шрифти, які можна використовувати у великих розмірах, таких як заголовки.
  • Рукописний текст - Ви хочете, щоб ваша типографія виглядала так, як написана від руки? Тоді це ваша установка.
  • Монопростір - Типографія, де всі персонажі займають однаковий простір, подобається це.

Інші фільтри включають:

  • Сортування - Сортування шрифтів за тенденційними, популярними, доданими датами або в алфавітному порядку.
  • Мови -Обмежте свій вибір шрифту мовами, не написаними латинським алфавітом, наприклад, арабською, тайською або в'єтнамською.
  • Ряд стилів -Виберіть кількість доступних стилів, тобто наявність шрифту різної товщини, курсивом, жирним шрифтом та ін..
  • Товщина - Виберіть бажану товщину вашого шрифту.
  • Нахил - Те саме, що і товщина, але для косого. Він коливається від прямого до майже горизонтального.
  • Ширина - Фільтруйте шрифти за шириною їх літер та інтервалом.

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

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

редагувати зразок тексту в шрифтах Google

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

Сторінка деталей шрифту в шрифтах Google

3. Додати шрифти у свою колекцію

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

шрифти, вибрані в шрифтах google

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

4. Налаштуйте параметри шрифту

Після того як ви задоволені своєю колекцією, натисніть на нижнє меню. Це відкриє цей екран:

налаштування шрифту в шрифтах Google

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

налаштувати шрифти в шрифтах google

Тут ви можете вибрати стилі відповідних шрифтів. Це важливо, якщо ви хочете використовувати шрифти різного розміру, що часто буває.

Однак будьте уважні: чим більше стилів має завантажувати ваш сайт, тим більше він сповільнюється (Google Шрифти навіть вказують швидкість завантаження вашої поточної колекції вгорі праворуч). Отже, подумайте, що вам справді потрібно, і лише вибирайте саме це. До речі, існує більше способів прискорити WordPress.

Якщо вам потрібна будь-яка інша мова, ніж стандартна латинська абетка, обов’язково виберіть її внизу.

виберіть мови шрифту в шрифтах google

Крім того, все, що вам потрібно знати, - це дві піктограми стрілок вгорі.

кнопка завантаження та обміну в шрифтах Google

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

Більш важливою є кнопка завантаження поруч. Натиснувши на нього, ви можете завантажити файли шрифтів, щоб використовувати їх на робочому столі (наприклад, у Photoshop). Використовуйте Skyfonts щоб вони були в курсі.

Пізніше ми також покажемо вам спосіб завантаження цих файлів на ваш сервер та хостинг-шрифти безпосередньо на ваш сайт. Майте це на увазі на майбутнє. Зараз ми покажемо вам другу схожу бібліотеку шрифтів.

Додаткове джерело для спеціальних шрифтів

  • 15+ безпечних веб-шрифтів, які ми рекомендуємо

З урахуванням сказаного ви повинні мати можливість знайти щось для себе. Остання остання порада - якщо ви не знаєте, як правильно поєднувати шрифти, використовуйте Пара шрифту де дизайнери зробили для вас ноги.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map