Здрастуйте, шановні читачі!

У попередній статті я писав про те, як нестандартним чином, використовуючи малі CSS-стилі, оформити контент на сайті під керуванням WordPress. Використовуючи стилі, можна, в тому числі, змінювати і шрифт, що застосовується в тексті.

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

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

Можна, але є певні умови.

Стандартні та нестандартні шрифти

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

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

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

Як вирішити цю проблему?

Для цього необхідно підключити необхідні шрифти до сайту.

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

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

У цій статті ми розглянемо детальніше перший спосіб.

Робота з сервісом Google Fonts

Почнемо з сервісу Google Fonts, як найвідомішого та найнадійнішого.

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

На сайті , як видно зі скріншоту, на даний моментколекція містить 708 шрифтів, але не всі вони нам підходять. Для російськомовних сайтів потрібні шрифти, які підтримують кирилицю. Зліва розташовуються фільтри для вибору, де у списку, що випадає Scriptобираємо Cyrillic,після чого залишається вже 61 варіант. З них ми й обираємо. Шрифти, що сподобалися, додаємо в колекцію, натискаючи на кнопку .

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

Далі переходимо до останнього пункту – кнопка Use. Тут можна скопіювати код для підключення шрифту до веб-сайту.

Цей код слід вставити на HTML-сторінку вашого сайту між тегами<head> іhead>. Для сайтів WordPress ці теги знаходяться у файлі заголовка header.php. У пункті 4 копіюється код для опису стилю CSS.

Як бачите, я вибрав три варіанти, і якщо тепер у HTML-редакторі WordPress набрати такий код:

то на сторінці це буде виглядати так:

Цей текст оформлений нестандартно. Poiret One.

Зробити це можна двома основними способами. Russo One.

Розглянемо детальніше перший метод. Marck Script.

Робота з сервісом AllFont.ru

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

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

Після цього можна скопіювати коди для вставки на сайт. Все робиться аналогічно до того, як робили на сайті Google Fonts. Я, наприклад, вибрав шрифт AGZeppelin-Roman, подивіться, як він виглядає.

Ласкаво просимо до найбільшої бібліотеки AllFont.ru

Сподіваюся, що стаття виявилася для вас корисною. Якщо так, підписуйтесь на оновлення блогу, оскільки готуються нові корисні статті.

До зустрічі.

Влад Мержевич

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

Якщо на комп'ютері вже встановлено специфічний шрифт, то в стилях достатньо додати рядок.

h1 ( font-family: SuperPuperFont; )

Значенням властивості font-family є назва гарнітури шрифту, вона буде застосовуватися до всіх заголовків

. Але що побачать відвідувачі сайту, у яких наш ефектний та рідкісний шрифт не встановлено? Подібна ситуаціянайімовірніша, тому якщо браузер не розпізнає заявлений шрифт, він використовуватиме шрифт за промовчанням, наприклад у Windows це Times New Roman. Весь наш ретельно продуманий шрифтовий дизайн відразу розсиплеться і піде прахом, тому треба пошукати найуніверсальніше рішення. Перше що відразу ж спадає на думку - це організувати завантаження файлу шрифту на комп'ютер користувача і відображення тексту вибраним шрифтом. У порівнянні з іншими методами на кшталт відображення тексту через малюнок цей спосіб найпростіший і найуніверсальніший.

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

Текст легко додавати та редагувати.

У браузері можна скористатися пошуком і знаходити бажані фрази.

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

Пошукові системидобре індексують вміст документа.

Текст можна виділити та скопіювати в буфер, а також перекласти іншою мовою.

Параметри тексту на кшталт міжрядкової відстані, кольору, розміру тощо легко змінювати за допомогою властивостей CSS.

До тексту знову ж таки через CSS просто додавати різні ефекти, наприклад тінь.

Як бачите, переваг дуже багато. Невеликі мінуси також є і для балансу їх варто згадати.

Не всі версії браузерів підтримують шрифт, що завантажується, і один для всіх формат.

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

У табл. 1 перераховані версії браузерів та формати шрифтів, які вони підтримують.
Табл. 1. Підтримувані формати
Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+
Найбільший формат - TTF. За винятком IE до версії 9.0 та iOS всі браузери його чудово розуміють. Так що якщо у вас шрифт саме в цьому форматі і ви орієнтуєтеся на сучасні браузери, ніяких додаткових дій робити не доведеться. Достатньо у стилях написати наступний код (приклад 1).

Приклад 1. Підключення TTF
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Шрифт

Формат	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Спочатку завантажуємо сам файл шрифту за допомогою правила @font-face. Усередині нього пишемо назву гарнітури шрифту через параметр font-family та шлях до файлу через src. Далі використовуємо шрифт як завжди. Так, якщо нам потрібно задати шрифт заголовка, то для селектора h1, як показано в прикладі, задаємо властивість font-family з ім'ям завантаженого шрифту. Для старих версій IE через кому перераховуємо запасні варіанти. У цьому випадку шрифт заголовка буде Comic Sans MS, оскільки IE8 і нижче не підтримує формат TTF.

Результат цього прикладу показано на рис. 1.

Мал. 1. Заголовок із завантаженим шрифтом

Що робити, якщо вам конче потрібний хитромудрий шрифт в IE8? На щастя, @font-face дозволяє одночасно підключати кілька файлів шрифтів різних форматів. Браузеру залишається лише вибрати відповідний. Таким чином, універсальне рішення, що працює у всіх браузерах, зводиться до конвертації наявного формату TTF в EOT з подальшим підключенням обох файлів.

Для конвертації є кілька онлайнових сервісів, що дозволяють завантажити файл TTF і на виході отримати EOT-файл. На жаль, у більшості цих сервісів одна і та ж біда - файл ми отримуємо, але російська мова в ньому не підтримується. У результаті необхідний результат не досягається, конвертація відбувається неправильно. Серед перевірених мною сайтів виявився один, який показав текст у IE правильно.

Переходимо на цей сайт, завантажуємо файл TTF і натискаємо кнопку «Convert TTF to EOT», після чого зберігаємо отриманий файл в папку зі шрифтами. У стилях залишилося зробити невеликий трюк і змусити різні браузеризавантажувати шрифт у потрібному форматі. Для цього додаємо два параметри src. Перший вказує на файл EOT та призначений для старих версій IE. Другий параметр src повинен містити дві адреси, що перераховуються через кому, одна з них вказує на файл TTF. Справа в тому, що IE версії 8.0 і молодше не розуміє кому в параметрі src і, відповідно, ігноруватиме параметр цілком. Варіантів написання може бути кілька, наприклад, повторити url, вказати ім'я шрифту всередині параметра local або взагалі написати неіснуючий шрифт. Якщо браузер не зможе завантажити такий шрифт, він перейде до другого в списку, а він у нас написаний правильно. Допустимі способи написання.

src: url(fonts/pompadur.ttf); url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

Діючий варіант підключення шрифту для всіх версій браузерів показаний у прикладі 2.

Приклад 2. Підключення EOT

HTML5 CSS3 IE Cr Op Sa Fx

Шрифт

Сучасний елемент політичного процесу

По суті, політичне вчення Монтеск'є наводить континентально-європейський тип політичної культури, що відбилося у працях Михельса.

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

Google Web Fonts

Зручний сервіс, що бере на себе рутину за допомогою різних форматів шрифтів та версій браузерів, ви знайдете за адресою www.google.com/webfonts. Хоча у колекції порівняно мало різних шрифтів (їх кілька десятків), всі вони підібрані дуже якісно та вільні для використання на сайтах.

Перед вибором шрифту переключіть значення Script на Cyrillic, тоді ви побачите список шрифтів, що підтримують російську мову (рис. 2).

Мал. 2. Вибір шрифтів у Google Web Fonts

Попередній шрифт слід додати до колекції, натиснувши на кнопку «Add to Collection», а потім на кнопку «Use» у правому нижньому кутку екрана. На наступній сторінці (рис. 3) можна остаточно вибрати потрібні вам шрифти. При цьому треба розуміти, що гарнітура шрифту може містити кілька нарисів і кожне з них підвищує обсяг файлів, що завантажуються.

Мал. 3. Шрифти, що завантажуються на сторінку

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

1. Через елемент . Рядок матиме приблизно наступний вигляд.

2. Через правило @import. Такий рядок вставляємо у свій CSS-файл у самому верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципі, всі шляхи рівноцінні, тому вибирайте за своєю перевагою.

Переваги застосування цього сервісу такі.

Шрифти вільні для використання, вам не потрібно платити за них.
Пропоновані шрифти «заточені» для перегляду на екрані, файли оптимізовані та займають порівняно невеликий обсяг.
Браузер визначається автоматично та під нього видається шрифт у потрібному форматі.

Один з основних плюсів сервісу, що шрифти зберігаються у форматах TTF, EOT, WOFF, SVG та завантажуються після перевірки браузера. Так, формат EOT буде доступним лише для старих версій IE.

Використовувати Google Web Fonts чи ні вирішувати вам. Якщо не знайшли відповідного шрифту, завжди можна підключити популярний і поширений TTF. Тим більше, що він підтримується останніми версіямипопулярних браузерів.

Якщо ви шукаєте, як встановити шрифт, тоді, швидше за все, знаєте навіщо він потрібен. Дозвольте припустити, що ви робите листівку на весілля, і хочете, щоб привітання виглядало екзотично, а не у стандартному шрифті Times New Roman (або, що ще гірше – Comic Sans). Або можливо, оформляєте резюме і необхідно виділити заголовок спеціальним шрифтом. Так чи інакше, у зв'язку зі шрифтами виникає два питання:

Де завантажити гарний шрифт;
Як встановити шрифт.

Де завантажити гарний шрифт

Наводжу кілька сервісів, на яких можна завантажити різноманітність шрифтів:

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

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

Насправді встановлення шрифту – справа елементарна. Взагалі шрифти зберігаються у папці C:/Windows/Fonts(за умовчанням вона прихована). Проте, у системі передбачено стандартний спосіб встановлення шрифтів через інтерфейс.

Панель керування має окремий розділ "Шрифти". Перетягнувши в цю «папку» будь-який завантажений шрифт (файл у форматі ttf) ви побачите його у списку шрифтів, наприклад Photoshop. Нижче показав весь цей процес на .

Як можна помітити, наш шрифт успішно з'явився у списку шрифтів Microsoft Word

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

У книзі «Про шрифт» Ерік Шпікерманн, фахівець № 1 з шрифтів, показує, що типографіка – не мистецтво для обраних, а потужний інструмент, доступний усім, кому є що сказати і хто хоче правильно висловити свої думки як на папері, так і на екран.

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

Знайомтесь, Ерік Шпікерманн

Ерік Шпікерманн – дизайнер, професор Бременської академії мистецтв, член Німецької ради з дизайну, президент Міжнародного товариства дизайнерів друкарні.

Ерік має пристрасть - шрифти. Він легко скаже, з якої епохи той чи інший шрифт. Який шрифт покаже ваше кохання, а який – серйозні наміри.

Ерік Шпікерманн та його найзнаменитіша фраза про шрифт.

Якщо Ви коли-небудь були в Німеччині і каталися на німецьких поїздах - написи, схеми та покажчики, які ви бачили на зупинках, перонах та вокзалах, написані шрифтом Deutsche Bahn, створений руками Еріка Шпікермана. А ще він створив шрифт для Audi, дизайн журналу The Economist. І написав цю книгу.

«Вся краса його видань у тому, що вони написані Еріком для НЕдизайнерів. Це те, що люди дуже люблять - дизайн та друкарня звичайною людською мовою. Шпікерманн – він просто тато Римський сучасної друкарні та дизайну взагалі».
Наталі ратковськи

Що всередині?

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

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

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

Літери з характером

Вдивіться в букву: легка вона чи масивна, кругла чи квадратна, тонка чи присадкуватий. На що схожа? Літери можуть стояти по стійці смирно, як солдати, а можуть співати чи граціозно танцювати у рядку, можуть кричати чи сміятися. Одні слова не лише звучать, а й виглядають приємніше, ніж інші.

Шрифт для сумніву, здивування, злості та радості. Ілюстрація з книги

У шрифті для слова joy ("радість") відкриті форми, впевнені штрихи та відчуття динаміки. Приємно бачити, що деякі слова містять пояснення у літерах, з яких вони складаються. Ці вільні та легкі форми виразно викличуть у вас асоціації з радісним, розпростерлими руки людиною, особливо буква Y.

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

Шрифт Кафки

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

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

Шрифти групи Mister K. Ілюстрація із книги

Рукописи останнього були досить нерозбірливими, але це не зупинило Юлію Сюсмяляйнен – вона розробила шрифт Mr. K - за почерком Кафки - з усіма недосконалостями, яких письменник, мабуть, хотів би уникнути.

Типографічна головоломка

Давайте пограємо. Як ви вважаєте, який шрифт відповідає кожному виду взуття?

Ілюстрація з книги.

Який шрифт вибрати

Можливо, вам доводилося бувати в такій ситуації: пізній вечір, о шостій ранку літак, а ви все ще збираєте валізу і не можете вирішити, що взяти із собою.

Подібне відбувається при виборі шрифту.

Вибирати відповідний шрифт для конкретного повідомлення цікаво і водночас важко. Що ви хочете вкласти у повідомлення, окрім фактів? Як бажаєте його інтерпретувати, прокоментувати, прикрасити? Якщо ви зупинитеся на «нейтральному» шрифті, наприклад Times New Roman, значить, і повідомлення має нейтральний характер.

Продумуючи зовнішній вигляд повідомлення, ви так чи інакше його інтерпретуєте.

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

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

Розворот із книги

Ще у книзі

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

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

…200 сторінок цікавих історичних фактів, корисних порадна вибір та застосування шрифтів, красивих наочних ілюструючих прикладів.

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

Як відомо, шрифти бувають платніі безкоштовні.

Але є і комбінований варіант. умовно безкоштовні шрифти.

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

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

Безкоштовні шрифтибувають системіі несистемні.

Набір системних шрифтів, залежно від версії windowsабо mac osможе відрізнятися, але зазвичай стандартний набір виглядає так:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Шрифти цього набору ще називають найбільш "безпечні" шрифти.

Використовувати безкоштовні шрифти дозволяється на різних носіях на власний розсуд.

Платні шрифтибувають з 2-ма видами ліцензії:

1. Настільна ліцензія

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

2. Веб-ліцензія

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

Оплата за перегляди ( pageviews)
Підписка на шрифт на місяць\півроку\рікі т.д
Передплата тарифу. Кожен тариф може обмежувати кількість переглядів або кількість часу на використання

Як перевірити платний шрифт чи ні

Ідемо на www.myfonts.com
Вбиваємо назву шрифту в рядок пошуку - http://s3. micp .ru/ Q48rU. jpg
Клікаємо на потрібний шрифт у результатах пошуку - http://s3. micp .ru/SoG6F. jpg
Клацаємо на вкладку Licensing - http://s1. micp .ru/vIOm1. jpg
Уважно читаємо умови використання

Замовникам

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

Дизайнерам

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

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

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

Більше цікавої інформації у моєму