Підключення шрифтів CSS. Робота з веб-шрифтами

Всім привіт! Про те, я писав в уроці 132, можете почитати. А в цій статті, я розповім, як можна легко і швидко підключити шрифт до свого сайту від Google Fonts. На сервісі Google Font треба підібрати шрифт для свого сайту, а потім підключаємо його.

Необов'язково файл шрифту завантажувати на хостинг. Досить прописати потрібний HTML код в шапку сайту, і в назву нового шрифту. Шрифти можна підключати не тільки на сайт WordPress, але і до будь-якого іншого сайту.

Як підключити шрифти Google Font до сайту

переходимо на сервіс Google Font за цим посиланням, і вибираємо потрібний нам шрифт.
Шрифти можна підбирати через фільтр. Тобто ми задаємо параметри, і таким чином сервіс знаходить шрифти з вибраними параметрами.

Можна задати і інші параметри, якщо потрібно: thickness (товщина шрифту), slant (похилий), width (ширина шрифту).

Також потрібно вибрати кирилицю, якщо Ваш сайт російською мовою: cirillic (кирилиця), або cirillic extended (кирилиця розширений).

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

Підводимо курсор миші до шрифту, який хочемо встановити на сайт, після чого з'являються додаткові налаштування / параметри: Quick-use (швидке використання), Pop out (переглянути шрифт в окремому вікні) і Add to Collection (додати в колекцію).

вибираємо « Quick-use»І бачимо з правого боку віджет у вигляді спідометра. Він показує, з якою швидкістю завантажується обраний шрифт. Чим менше цифра на цьому спідометрі, тим краще.

Ще нижче можна вибрати один з трьох варіантів установки шрифту на сайт: standart, @import або javascript.

До кожного варіанту є інструкція на англійською, Як правильно підключити шрифт до сайту. Я Вам покажу перший варіант « standart», Тому що він простіший.

Копіюємо рядок виділену червоним кольором, а потім вставляємо її в файл header.php між тегами ….

Потім відкриваємо файл стилів style.css, знаходимо шрифт, який потрібно змінити, і прописуємо новий. Просто прописуємо назву нового шрифту. Шрифт Google Fonts поміщаємо в лапки, наприклад, font-family: "Aladin", Arial, Helvetica, Sans-serif.

Якщо Ви зовсім нічого не зрозуміли, про що я тут розповів, тоді подивіться відео, де я детально розповідаю, як підключити шрифт Google Font до сайту WordPress

______________________
До уроку 204. а без плагіна

Спонсор матеріалу.
Кондиціонери в інтернет-магазині http://www.technodom.kz/catalog/konditsionery. Кондиціонери - кращі товари, кредитування, величезний вибір, бездоганний сервіс.

Добрий день дорогі читачі. Все з вас, напевно, мріють зробити свої або клієнтські сайти більш лаконічними і привабливими.

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

Одна з можливостей, візуально поліпшити читаність текстів - це підключення сторонніх шрифтів. Адже все напевно знають, яка «бідна» стандартна колекція кириличних шрифтів в Windows, яка відповідає за відображення тексту в браузері.

Стандартні шрифти:

Cufon і @ font-face

Раніше я вже писав про, за допомогою якого можна підключати не стандартні шрифти до сайту. А зараз розглянемо більш простий спосіб - це правило @ font-face в css і підвантаженням самого шрифту з сховища шрифтів Google Fonts.

Вся різниця між Cufon і @ font-face в тому, що перший використовує js для емулювання шрифту і промальовує символи своїми засобами, а @ font-face підвантажує сам шрифт на комп'ютер відвідувача і браузер вже використовує його для відображення тексту.

У будь-якому випадку Cufon і @ font-face зменшують швидкість завантаження сайту, хоч і не значно.

Використання Google Fonts на сайті

Не буду розписувати багато і довго, я приведу конкретний приклад підключення Google Fonts, на прикладі цього блогу.

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

Вибір шрифту в репозиторії

Щоб не лякалися, поясню - репозиторій це сховище, але по-буржуйських :). І так, заходимо на http://www.google.com/fonts/і дивимося для себе відповідний шрифт:

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

• Word- відображення декількох букв. В такому режим зручно порівнювати відразу багато шрифтів і дивитися як виглядають конкретні символи;
• Sentence- відображення у вигляді одного речення;
• Paragraph- виводитися великий шматок тексту, який дозволить наочно порівнювати шрифт вже в самому тексті;
• Poster- відображаються заголовки, такий спосіб порівняння зручний для підбору шрифту, який буде використовуватися в заголовках.

Підключення шрифту до сайту

Після цього, на панелі Collection, яка знаходитися внизу, заходимо у вкладку Use, яка відповідає за використання шрифтів з вашої колекції. Тут ви відразу побачите, що гугл показує на скільки погіршиться швидкість завантаження сторінки:

Нижче знаходиться панель з вибором «типу відображення», вибираємо Latin (latin) і Cyrillic (cyrillic), що дасть нам можливість відображати як латинські, так і кириличні літери:

Після цього переходимо до третього пункту на цій сторінці, а саме до самого підключення. Google пропонує нам три варіанти вбудовування своїх шрифтів - через js, стандартний спосіб через підключення в і @import в css файлі. Я використовую останній спосіб.

Відкриваємо свій файл css і прописуємо рядок, яку нам надав google:

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

Використання в CSS

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

h1, h2, h3 (font-family: 'Cuprum', sans-serif;)

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

На цьому все, спасибі за увагу і до швидких зустрічей.

Вітаю вас шановні читачі. Сьогодні ми поговоримо про google шрифтах (google web fonts), від тому як їх завантажувати і підключати до сайту.

Йдемо на сайт www.google.com/fonts/, В фільтрі справа вибираємо: 1. потрібну категорію, 2. при необхідності сортуємо їх і 3. вибираємо потрібний нам мову (якщо потрібна російська шрифт в меню зліва виберіть Cyrillik).

Отже ми вибрали шрифт, тепер потрібно вибрати його накреслення, для цього розгорніть панельку знизу ( Open selection drawer) І перейдіть у вкладку CUSTOMIZEі виберіть потрібні вам накреслення і мови.

Для того щоб завантажити натисніть на кнопку donwload.

Підключення завантаженого шрифту

Скопіюйте містяться в архіві шрифти в папку / fonts, яка повинна лежати в тій-же директорії, що і папка / css вашого HTML сайту.

Стандартне підключення викачаних шрифтіввиглядає так

@ Font-face (font-family: "Імя_шріфта_любое"; src: url ( "Імя_файла_шріфта.eot"); src: url ( "Імя_файла_шріфта.eot? #Iefix") format ( "embedded-opentype"), url ( "Імя_файла_шріфта .woff ") format (" woff "), url (" Імя_файла_шріфта.ttf ") format (" truetype "), url (" Імя_файла_шріфта.svg # DSNoteRegular ") format (" svg "); font-weight: normal; font -style: normal;)

У моєму випадку підключення буде виглядати так

/ * Код для підключення шрифту в /css/style.css * / @ font-face (font-family: "RobotoRegular"; url ( "../ fonts / RobotoRegular.ttf") format ( "truetype"); font- style: normal; font-weight: normal;)

Для того що б підключити обраний вами шрифт до сайту перейдіть на вкладку EMBED, Там ви побачите 2 способи підключення:

1. STANDARD

даний кодпотрібно додати в секцію вашого HTML-документа.

2. @IMPORT

@import url ( "https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Важливо. В не залежності від способу підключення, для визначення цих сімейств використовуйте наступні CSS правила: font-family: 'Roboto', sans-serif; про це буде ще нижче.

Звичайно, є різні плагіни для того, щоб використовувати шрифти Google Web Fonts на своєму WordPress сайті, однак якщо ви розробляєте свою власну тему, то, можливо, вам знадобиться тісно пов'язати з нею обрану вами типографіку, обходячи плагіни. Нижче ми покажемо, як використовувати Google Web Fonts в своїй темі.

Для початку давайте перейдемо до сайту Google Web Fontsі виберемо шрифт, який нам необхідно застосувати в темі. За допомогою спеціальних інструментів, розташованих з лівого боку, можна звузити область пошуку, оскільки шрифтів дійсно багато. Я знав, що мені потрібно жирний serif шрифт для заголовків і назви блогу, тому я вибрав serif в випадаючому меню Categories і потім перемістив слайдер Thickness (товщина) вправо.

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

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

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

Коли ви додасте свої шрифти в колекцію, ви побачите їх у синій секції в нижній частині сайту. Як тільки у вашій колекції з'являться шрифти, які ви хочете використовувати, просто натисніть на кнопку Use.

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

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

Тепер ми переходимо до третього кроку, який вже не такий простий, як попередні. На третьому кроці ми отримуємо код, який необхідно додати до наших сайтах - три різні варіанти. Вибираємо варіант Standard - проте ми кілька відхилимося від інструкцій Google, щоб підтримати усталені методи додавання стилів до WordPress тем. У коді для стандартного варіанту копіюємо тільки URL, який вказаний як href атрибут для тега link.

Потім відкриваємо файл теми functions.php. Ми створимо функцію для того, щоб завантажити CSS, який ми будемо використовувати в нашій темі:

Function ggl_load_styles () ()

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

Тепер в цій функції нам потрібно зареєструвати нашу таблицю стилів, отриману від Google:

Function ggl_load_styles () (if (! Is_admin ()) (wp_register_style ( "googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script");))

Ми використовуємо функцію wp_register_style. Перший аргумент - це дескриптор, тобто скорочення, яке ми можемо використовувати для звернення до цієї стильової таблиці надалі в нашому коді. Другий аргумент - це шлях до файлу. Ми використовуємо URL, який ми отримали на третьому кроці Google-інструкцій.

Далі ми підключаємо нашу основну стильову таблицю для нашої теми. Сподіваюся, ви не розмістили тег link в розділі head вашого файлу header.php? Якщо так, то поверніться до файлу і видаліть цей код. Потім підключіть стильову таблицю у файлі functions.php:

Function ggl_load_styles () (if (! Is_admin ()) (wp_register_style ( "googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style ( "ggl ", get_stylesheet_uri (), array (" googleFont "));))

Ми використовуємо функцію wp_enqueue_style. Вона має ті ж самі аргументи, що і wp_register_style. Спочатку ми прив'язуємо до нашої стильової таблиці дескриптор. Потім отримуємо шлях до нашої таблиці стилів. На щастя, в WordPress отримати шлях можна через функцію get_stylesheet_uri (). Після чого ми вказуємо залежності. Наш файл style.css залежить від стильової таблиці Google Web Fonts.

Нарешті, ми використовуємо хук wp_enqueue_scripts для виклику нашої функції:

Function ggl_load_styles () (if (! Is_admin ()) (wp_register_style ( "googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style ( "ggl ", get_stylesheet_uri (), array (" googleFont "));)) add_action (" wp_enqueue_scripts "," ggl_load_styles ");

З файлом functions.php покінчено. Тепер нам залишилося зробити останній крок, щоб використовувати вибраний шрифт. Четвертий крок в інструкціях Googleпоказує, які значення ми повинні передати до властивості font-family для використання нашого шрифту. Я хочу зробити все мої заголовки шрифтом Holtwood One SC:

H1, h2, h3, h4, h5, h6 (font-family: "Holtwood One SC", serif;)

А опис сайту хочу зробити шрифтом Rouge Script:

Site-description (font-family: "Rouge Script", cursive;)

Всі! Більше нічого робити не потрібно! Ви додали шрифти Google Web Fonts до своєї теми WordPress. Використовуйте їх відповідально!

Вітаю вас шановні читачі. Сьогодні ми поговоримо про google шрифтах (google web fonts), від тому як їх завантажувати і підключати до сайту.

Йдемо на сайт www.google.com/fonts/, В фільтрі справа вибираємо: 1. потрібну категорію, 2. при необхідності сортуємо їх і 3. вибираємо потрібний нам мову (якщо потрібна російська шрифт в меню зліва виберіть Cyrillik).

Отже ми вибрали шрифт, тепер потрібно вибрати його накреслення, для цього розгорніть панельку знизу ( Open selection drawer) І перейдіть у вкладку CUSTOMIZEі виберіть потрібні вам накреслення і мови.

Для того щоб завантажити натисніть на кнопку donwload.

Підключення завантаженого шрифту

Скопіюйте містяться в архіві шрифти в папку / fonts, яка повинна лежати в тій-же директорії, що і папка / css вашого HTML сайту.

Стандартне підключення викачаних шрифтіввиглядає так

@ Font-face (font-family: "Імя_шріфта_любое"; src: url ( "Імя_файла_шріфта.eot"); src: url ( "Імя_файла_шріфта.eot? #Iefix") format ( "embedded-opentype"), url ( "Імя_файла_шріфта .woff ") format (" woff "), url (" Імя_файла_шріфта.ttf ") format (" truetype "), url (" Імя_файла_шріфта.svg # DSNoteRegular ") format (" svg "); font-weight: normal; font -style: normal;)

У моєму випадку підключення буде виглядати так

/ * Код для підключення шрифту в /css/style.css * / @ font-face (font-family: "RobotoRegular"; url ( "../ fonts / RobotoRegular.ttf") format ( "truetype"); font- style: normal; font-weight: normal;)

Для того що б підключити обраний вами шрифт до сайту перейдіть на вкладку EMBED, Там ви побачите 2 способи підключення:

1. STANDARD

Даний код потрібно додати в секцію вашого HTML-документа.

2. @IMPORT

@import url ( "https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Важливо. В не залежності від способу підключення, для визначення цих сімейств використовуйте наступні CSS правила: font-family: 'Roboto', sans-serif; про це буде ще нижче.