Від автора: у даній статті ми поговоримо з Вами веб шрифтах WordPress. Зовсім недавно все ще говорили про Lobster. Не про того, який плаває в океані, а про веб-шрифт. Для тих, хто не чув, Lobster це популярний Google шрифт.
Ви, мабуть, вже знаєте, як використовувати сторонні шрифти. У далекому 1998 році в CSS 2 з’явилося правило @font-face. У теорії, з його допомогою дизайнери могли завантажити абсолютно будь TrueType або PostScript шрифт на комп’ютер користувача і використовувати його на веб сторінці. До нещастя, на той момент дане правило підтримував тільки IE4. Люди боялися, що дорогі шрифти будуть зливатися в мережу безкоштовно. Сьогодні ж, в CSS3 досі не вирішена проблема з піратством, але тепер правило підтримується у всіх браузерах. Також з тих часів різко зросла дозвіл екранів. Якщо ви досі не вмієте використовувати сторонні шрифти, то пора навчитися.
Загальні властивості веб-шрифтів
Перед тим, як ми поговоримо про використання сторонніх веб-шрифтів в WordPress, давайте подивимося на них в цілому.
Самий базовий рівень підтримки шрифтів це операційна система. На настільних комп’ютерах і ноутбуках може бути безліч різноманітних шрифтів, а для Android всього три.
До нещастя, це все, що у нас є. Всі ми знаємо, як погано Helvetica виглядає на Windows з розміром 16px і нижче, а Arial виглядає і так ідеально на старих версіях OS X.
Багато відмінності пов’язані з тим, що операційна система від Apple була прив’язана до старої технології друку 72 точки на дюйм. Таким чином, для шрифтів у 10 точок виділяється 10 пікселів на екрані. На той момент Apple виготовляли вертикальні монітори (портретні), які були одного розміру зі стандартним американським аркушем паперу, що дозволяло робити порівняння один до одного в цифровій і друкованій версії документів. Microsoft ж вибрали 96 PPI (точок на дюйм) за основу, щоб люди сиділи від моніторів на 1/3 далі, ніж якщо б вони розглядали звичайний друкований документ. Таким чином на Windows все було більше на 1/3.
З 1990-х пройшло багато часу, багато чого змінилося. Тепер у нас безліч дозволів і розмірів екранів. І якщо ви самі не поставите шрифт, то за вас це зробить браузер.
Ще одна проблема полягає в тому, що деякі організації обмежують кількість встановлених на комп’ютері шрифтів. Одного разу я працював у фірмі, у якої на комп’ютерах були встановлені тільки Georgia і Verdana. Доходило до того, що листи та email можна було відправити тільки в тому випадку, якщо шрифт збігався із загально прийнятим.
Вбудовані шрифти
Незважаючи на корпоративні шрифти, більшість настільних комп’ютерів і ноутбуків використовують шрифти, створені в рамках проекту Microsoft Core Fonts for the Web Project. Пак шрифтів 1996 року включає в себе Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana та Webdings. В операційних системах можуть застосовуватися ці шрифти або їх еквіваленти, але в браузерах трохи по-іншому.
Обмеження щодо шрифтів можна нівелювати за допомогою стека шрифтів. З його допомогою браузеру задається CSS правило, використовувати один шрифт набору. Шрифти бувають двох типів serif (з зарубками на кінцях букв) і sans-serif (без засічок). Таким чином, можна створити сімейство шрифтів font-family: Cambria, ‘Hoefler Text’, ‘Liberation Serif’, Times, ‘Times New Roman’, serif. Браузер прогляне стек з першого зазначеного шрифту, визначить, чи присутній він в операційній системі. Якщо такий є, то буде використано перший знайдений шрифт. Якщо ж жоден з шрифтів не знайдено, буде використаний запасний. У нашому прикладі це serif.
Основна мета підібрати шрифти, які відмінно виглядають у всіх браузерах, на всіх дозволах і при будь-якому рівні масштабування.
Є чудова стаття по стеку шрифтів від канадського дизайнера Amrinder Sandhu. До нещастя, стек не працює, якщо ваші користувачі сидять через мобільні пристрої. Android пристрої використовують шрифти Droid Sans, Droid Serif і Droid Sans Mono, а пристрою iOS Helvetica Neue з великим набором різних стилів і насиченості.
Ви, швидше за все, захочете повністю контролювати відображення сторінок в WordPress, а не покладатися на вбудовані в операційну систему шрифти. Домогтися повного контролю можна за допомогою вставки сторонніх шрифтів. Розглянемо типи шрифтів.
Безкоштовні шрифти
Переважна більшість доступних шрифтів ліцензовані тим або іншим чином. При купівлі комп’ютера, планшета або мобільного телефону з операційною системою, частина його вартості складають ліцензії шрифтів. Тим не менш, існує багато способів використовувати широкий перелік безкоштовних вбудованих шрифтів.
Вбудовані шрифти це набір символів, які завантажуються на комп’ютер користувача з платформи третьої особи на час перегляду веб-сторінки. Як тільки сторінка буде закрита шрифти. Такий підхід дозволяє компаніям-хостингу шрифтів не втрачати контроль за поширення шрифтів і в той же час відображати шрифт на екрані користувача. Є безліч компаній-хостингів шрифтів. Більшість з них відомі:
Google Fonts, можливо, самий популярний сервіс. Платформа містить понад 700 добре спроектованих шрифтів, в тому числі і рак.
У Adobe теж є свій сервіс Edge Web Fonts platform. Вони безпосередньо співпрацюють з сервісом покращення якості її роботи, вирізавши всі платні шрифти і залишивши тільки безкоштовні.
Інша варта це платформа Open Font Library. Налічує більше 600 шрифтів.
Всі шрифти з цих платформ, а також і інші поширюються за ліцензією Open Font Licence. Цілями OFL є стимулювання розробки спільних проектів з веб-шрифтів по всьому світу, підтримка академічних і лінгвістичних спільнот, а також надання безкоштовних фреймворків, якими можна вільно ділитися і спільно їх покращувати.
Основна перевага Open Fonts шрифтів, їх безкоштовному розповсюдженні, не потрібно щорічно оплачувати ліцензію за використання шрифту на своєму сайті. А недолік у тому, що в шрифті можуть отсутствоватть деякі стилі або типи жирності.
Платні шрифти
Незважаючи на повсюдне використання безкоштовних шрифтів, є безліч творців шрифтів, які пропонують шрифти преміум класу. Наприклад в Type Foundries Archive налічується близько 300 творців шрифтів і сайтів, які пропонують платні шрифти. Притому не всі з шрифтів вбудовувані.
Німецький сайт Font Shop, можливо, найбільш популярні сервіс платних шрифтів в інтернеті. На сайті є як високоякісні шрифти, так і вельми незвичайні набори символів, таких як фрукти і овочі, вилки і ножі, баночки та побутова техніка для дому.
Якщо у вас є акаунт в Adobe Creative Cloud, то ви отримуєте доступ до сервісу покращення якості її роботи, що налічує понад 450 шрифтів. Заковика в тому, що при використанні ліцензії, шрифти можна використовувати тільки у друкованих версіях або на некомерційних сайтах. Якщо ж ви працюєте з клієнтами, Adobe припускає, що ви створили обліковий запис і передали його своєму клієнту. Тобто якщо клієнт не сплатить акаунт вчасно, то ваш сайт скористається резервними шрифтами, тобто системними.
Додаємо сторонній шрифт у WordPress
Існує безліч плагінів, які дозволяють використовувати сторонні веб-шрифти в WordPress, приміром, Easy Google Fonts. Я не буду загострювати увагу в цій статті на плагінах. Ми розглянемо, як зробити це самому, змінивши тему. Крім того, деякі теми вже йдуть з різними шрифтами.
В різних сервісах код буде трохи відрізнятися. Я поясню, як це зробити з допомогою Google Fonts і Adobe Edge/покращення якості її роботи. Інші сервіси працюють приблизно так само. Першим ділом не забудьте зробити бекап сайту (в ідеалі краще працювати з копією сайту) на випадок, якщо щось піде не так. Всі зміни краще робити в дочірніх темах, щоб при оновленні нічого не віддалявся.
Google Fonts
У Google Fonts є три способи (крім плагінів) відобразити сторонні шрифти в WordPress: @import, посилання і JS.
Щоб вибрати шрифт, натисніть на кнопку швидкого використання. Якщо потрібно, виберіть потрібні стилі, насиченість і набір стилів.
Далі необхідно вибрати спосіб вставки. Найпростіший через @import у файлі style.css для поточної теми. Не має значення, де в файлі буде розміщено код, але @import буде блокувати завантаження будь-якого вмісту, поки сам не завантажиться. Тому, якщо хочете використовувати даний метод, то потрібно зібрати всі запити в один @import.
Другий спосіб теж не відрізняється підвищеною складністю. Він працює за допомогою посилання на шрифт, код розташовується у вкладці Standart. Код прописується у файлі header.php у самому верху файлу. Потім потрібно додати назву вашого шрифту першим в стек шрифтів.
Варто зауважити, що блозі Google Web Fonts стверджує, що якщо тег script знаходиться перед оголошенням @font-face, то в IE нічого не відображуватиметься, поки не завантажаться файли шрифтів. І отже, якщо файли яким-небудь чином не завантажилися, користувачі IE можуть побачити частково завантажену сторінку з порожніми шматками. Розміщуйте @font-face як можна раніше. Черговий спосіб це вставка шрифту в файл functions.php. Функція нижче завантажує стилі шрифтів.
А сам шрифт можна завантажити з допомогою JS. Є докази як за, так і проти використання JS. Але тих, хто віддає перевагу не використовувати JavaScript вкрай мало. Код необхідно розмістити у файлі header.php дочірньої теми між тегами head. І знову Google припускає, що даний код повинен розташовуватися вище всього.
Adobe Edge Web Fonts і покращення якості її роботи
Додати шрифти Adobe покращення якості її роботи вже трохи складніше. З одного боку можна скористатися Google Fonts, але якщо ви не самий просунутий розробник, то можна скористатися плагіном покращення якості її роботи Fonts. Після установки плагін з’явиться в налаштуваннях. Не забудьте зробити бекап сайту перед тим, як що-небудь міняти.
Щоб скористатися покращення якості її роботи, залогинтесь в Creative Cloud. Після вибору шрифту, створіть набір. Задайте ім’я набору, додайте домен сайту. Після цього сгенерируется код JS. Скопіюйте та збережіть цей код у Notepad або TextEdit.
Наступний крок – вибрати шрифт, додати його до вашого сайту і опублікувати. Додавайте скільки завгодно багато шрифтів і публікуйте їх.
Після публікації, зайдіть в плагін покращення якості її роботи Fonts.
Вставити код, який зберегли у текстовому файлі.
За бажанням додайте CSS стилі. Я у себе додав стилі для заголовків постів H1, підзаголовків H2. Своїм селекторам краще всього задавати унікальні імена, щоб вони не конфліктували з темою. Зробити це можна за допомогою панелі розробника у браузері. Не забувайте оновлювати сторінку, шрифт може стати доступним через пару хвилин після додавання на сайт.
Також рекомендується завжди прописувати властивості font-weight і font-style для свого шрифту. Ці властивості допоможуть змінити шрифт на різних платформах.
Висновок
Зробити свій сайт незвичайним можна, просто додавши на нього сторонній шрифт. Даний спосіб також допоможе виділити безкоштовну тему серед двійників.
Однак не додавайте величезна кількість різних шрифтів просто тому, що ви можете. Не використовуйте більше двох, трьох шрифтів. Як правило, це найбільш оптимальний варіант, не тільки з точки зору продуктивності, але і з дизайнерської точки зору.
Google пропонує полегшений спосіб. Від вас потрібно натиснути всього одну кнопку. Графічний дизайн це мистецтво, оттачиваемое роками. Але можна прискорити цей процес, додавши кілька гарних веб-шрифтів, і тепер ваш сайт побачать всі.
