Свій шрифт на сторінці. Встановлюємо нові шрифти у MS Word Як користуватися встановленими шрифтами

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

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

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

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

Спочатку завантажуємо сам файл шрифту за допомогою правила @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. Тим більше, що він підтримується останніми версіями популярних браузерів.

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

Давайте я напишу CSS-код, А потім його поясню:

@font-face (
font-family: SpecialFont;
src: url("font/specialfont.ttf");
}
p (
font-family: SpecialFont;
}

В результаті, до тегів

буде застосовано шрифт SpecialFont. Я думаю, код досить прозорий, але таки поясню. Вам потрібно роздобути шрифт та завантажити до себе на сайті, наприклад, у папку font. Далі у CSS-кодпрописати в @font-faceйого ім'я та шлях до нього, а далі вже можна його використати.

Але недарма здебільшого використовують картинки для виведення нестандартних шрифтів. У використання @font-face є 2 недоліки:

1. Є дуже великі шрифти, які важать сотні кілобайтів, а це різко збільшить час завантаження сторінки.
2. Другий мінус ще серйозніший. Не всі браузери підтримують таку можливістьБільш того, деяким браузерам потрібен шрифт в іншому форматі (не ttf). Таким чином, у деяких Ваш шрифт все одно не відобразиться. Щоб вирішити цю проблему, треба завантажувати той самий шрифт у різних форматах, що в рази посилить перший мінус.

Але варто відзначити, що перший мінус вже не такий важливий як раніше. Так як швидкості Інтернет-з'єднання зростають дуже швидко, і вже мало, кого хвилюють додаткові 100-200 КБ.

Другий мінус теж не такий важливий. Єдині більш-менш популярні браузери, які не зрозуміють цього коду – це IE8 і нижче, плюс iOS. Всі інші сучасні браузери без проблем цей код зрозуміють.

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

P.S.Усіх жінок вітаю зі свят весни!

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

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

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

Ось список безпечних ресурсів, з яких можна завантажувати шрифти для MS Word та інших сумісних програм:

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

1. Виберіть на одному із запропонованих нами сайтів (або на іншому, якому повністю довіряєте) потрібний шрифт і скачайте його.

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

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

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

4. Відкрийте .
У Windows 8 - 10зробити це можна за допомогою клавіш Win+X, де в списку потрібно вибрати . Замість клавіш також можна використовувати клік правою кнопкою мишки за значком меню "Пуск".

У Windows XP - 7цей розділ знаходиться в меню "Пуск" — .

5. Якщо у режимі відтворення "Категорії", як на нашому прикладі, перейдіть на режим відображення дрібних значків - так ви зможете швидше знайти необхідний пункт.

6. Знайдіть там пункт "Шрифти"(скоріше за все, він буде одним із останніх), і натисніть на нього.

7. Відкриється папка зі шрифтами, встановленими в Windows. Помістіть до неї файл шрифту (шрифтів), раніше завантажений та вилучений з архіву.

Порада:Ви можете просто перетягнути його (їх) мишкою з папки до папки або використовувати команди Ctrl+C(копіювати) або Ctrl+X(вирізати), а потім Ctrl+V(Вставити).

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

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

Встановлення нового шрифту у Word

1. Запустіть Ворд і знайдіть новий шрифт у списку стандартних, вбудованих у програму.

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

Щоб швидко знайти новий шрифт у MS Word і приступити до його використання в наборі тексту, відкрийте діалогове вікно групи "Шрифт", натиснувши на невелику стрілку, розташовану в нижньому правому кутку цієї групи.

3. У списку "Шрифт"знайдіть назву нового, встановленого вами шрифту (у нашому випадку це Altamonte Personal Use) та виберіть його.

Порада:У вікні "Зразок"Ви можете бачити, як виглядає шрифт. Це допоможе швидше знайти, якщо ви не запам'ятали назву шрифту, але запам'ятали його візуально.

4. Після того, як ви натиснете "ОК"у діалоговому вікні "Шрифт", перейдіть на новий шрифт і зможете почати його використовувати.

Використання шрифту в документ

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

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

Примітка:Використання шрифту в документ призведе до збільшення обсягу документа MS Word.

1. У документі вордів перейдіть у вкладку "Параметри", відкрити яку можна через меню "Файл"(Word 2010 - 2016) або кнопку "MS Word" (2003 — 2007).

2. У діалоговому вікні “Параметри”, яке відкриється перед вами, перейдіть до розділу "Збереження".

3. Встановіть галочку навпроти пункту "Впровадити шрифти у файл".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифт Кафки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ще у книзі

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

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

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

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

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

У попередній статті я писав про те, як нестандартним чином, використовуючи малі 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

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

До зустрічі.