Можливості google fonts або оригінальні шрифти на сайті

Відео: Шрифти Google fonts для WordPress

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

Як вже зрозуміло з назви ми будемо використовувати шрифти сервісу Google Fonts. Він надає широкі можливості вибору, встановлення та налаштування шрифтів.

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

Знайомство з сервісом Google Fonts - Оригінальні шрифти на сайті

Насамперед перейдіть на сам сайт - Google Fonts. Коли ви зайдете на цей сервіс, ви побачите сторінку, де праворуч знаходиться фільтр. За допомогою даного фільтра можна підбирати шрифт і встановлювати його налаштування за вашим бажанням. Зверніть увагу на поле «Script«. Тут ви можете вибрати потрібний вам шрифт, тобто російські, англійські букви і так далі.

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

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

Відео: Як встановити Google Fonts (Гугл шрифти) на свій комп`ютер

установка шрифту

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

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

123456

lt;htmlgt;lt;headgt;lt;link href=`Http://fonts.googleapis.com/css?family=Signika+Negative` rel=`Stylesheet` type=`Text / css`gt;lt;/headgt; ......lt;/htmlgt;

Після цього, у файлі стилів прописати наступні рядки (які в 4-й пункті) тому блоку, в якому ви хочете бачити даний стиль тексту:

Відео: Як підключити до свого сайту шрифти від Google Web Fonts?

1

font-family: `Signika Negative`, sans-serif-

висновок

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

Успіхів!