Красиві шрифти для Wordpress. Як додати в блог?
Сприйняття інтернет-користувачем сайту багато в чому залежить від використовуваних шрифтів. На жаль, стандартна колекція шрифтів обмежена, що не дозволяє зробити сайт дійсно красивим.
Але є вихід - використання шрифтів з колекції Google Fonts. Сервіс дозволяє використовувати для оформлення сайту або блогу шрифт, навіть якщо він не встановлений на комп'ютері користувача. Зараз ми розглянемо, як додати будь-який шрифт Google Fonts в вашу тему WordPress.
Є кілька способів зробити це, ми розглянемо два з них.
Простий спосіб як додати шрифти для WordPress:
1. Заходимо на сайт бібліотеки шрифтів , Де вибираємо відповідний шрифт;
2. Під обраним шрифтом знаходиться кнопка Quick-use. Натискаємо на неї:
3. Після кліка ви будете переміщені на іншу сторінку, де буде форма «Add this code to your website»:
4. Відкрийте текстовий редактор і скопіюйте в нього отриманий код, його ми і будемо використовувати для вставки шрифту на сайт.
5. Далі відкриваємо папку з темою, шукаємо файл під назвою style.css і вставляємо в нього отриманий код:
@import url (http://fonts.googleapis.com/css?family=Squada+One);
Даний метод є простим і часто використовуваним, але має недоліки. При використанні методу @import сайт не буде завантажувати вміст сайту до тих пір, поки не файл шрифту не буде завантажений повністю. Це знизить показники продуктивності і швидкості сайту.
Особливо відчутно падіння продуктивності буде при використанні декількох шрифтів.
Стандартний спосіб додавання шрифтів:
Наступний метод є більш трудомістким, але не впливає на продуктивність ресурсу. Він полягає у використанні посилань.
- Нам знадобляться посилання, отримані в кроці 3 попередньої інструкції.
- Шукаємо в папці з темою файл header.php і додаємо в нього код: <link href = 'http: //fonts.googleapis.com/css? Family = Squada + One' rel = 'stylesheet' type = 'text / css' >
- У потрібному файлі css додаємо код з обраним шрифтом: h1 {font-family: 'Squada One', Helvetica, Arial, serif; }
Перевага другого методу - запит до шрифту відправляється на ранній стадії завантаження сайту, завдяки чому не виявляється вплив на швидкість його завантаження.
Com/css?Com/css?