1. Спосіб 1: Тупий
2. Спосіб 2: Перетворимо дизайн під стандартний шрифт
3. Спосіб 3: Картинка замість тексту
4. Спосіб 4: Cufon
5. Спосіб 4: Підключити шрифт до сайту за допомогою CSS
6. Чому шрифти йдуть саме в цьому порядку?
7. Готово!

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

Ну і поставив я над собою експеримент, а щоб було важче зіскочити, вирішив «лабораторну зошит» зробити публічною і розмістив її на одному закинутому блозі.

Старий дизайн не відповідав нової задумом, і я, не довго думаючи, взяв більш-менш сподобався із загального сховища WordPress'а.

Знаєте в чому проблема деяких готових шаблонів, взятих звідти? Проблема в кострубатою сумісності з кириличними шрифтами. У моєму випадку, постраждали заголовки. Оскільки шрифт, на який посилався CSS не містив російських символів, оні бралися з шрифта (чи то Sans, то чи Arial). У підсумку, заголовки були величезні і псували весь вигляд. Довелося думати, чим замінити шрифт.

Способів це зробити - кілька.

Спосіб 1: Тупий

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

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

Не робіть так!

Спосіб 2: Перетворимо дизайн під стандартний шрифт

Це найідеальніший варіант, але, на жаль, він не завжди годиться, оскільки іноді через нього втрачається «родзинка» дизайну. Проте, ЗАВЖДИ розглядайте такий підхід, оскільки, як би ви не старалися, може статися, що клієнтський комп'ютер все-одно задіє шрифт з тих, які є в наявності.

Безпечні шрифти, які є майже у всіх операційних системах, це: Verdana (ідеальний для текстів), Impact (іноді дуже хороший в заголовках), Arial, Arial Black, Comic Sans MS (кака, яку дуже люблять новачки), Courier New (підходить для прикладів коду і форм), Georgia, Times New Roman, Trebuchet MS.

Спосіб 3: Картинка замість тексту

Варіант дуже кросбраузерності і підходить для оформлення статичних елементів. Наприклад - шапки сайту. Робите прозору PNG з текстом з потрібним шрифтом, обробляєте як вам треба і вставляєте на сайт, не забувши заповнити ALT. Або те ж саме, але текст ставали у своїй величі на який-небудь фон і зберігаємо в JPG.

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

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

Спосіб 4: Cufon

Існує така javascript-бібліотека, яка підключається до сайту разом з допоміжним javascript-аплетів, який містить в собі всі криві, необхідні для малювання букв будь-якого шрифту засобами javascript. Детальніше дивіться тут http://habrahabr.ru/post/61033/

Ці аплети можна створити з файлу шрифту за допомогою онлайн-генератора http://cufon.shoqolate.com/generate/

Так само, можна вибрати готові аплети тут http://www.cufonfonts.com/ru

Найпростіший спосіб, скористатися http://www.google.com/fonts Вибираєте потрібний шрифт з представлених і отримуєте готовий код, який потрібно вставити на сайт (в head, і в файл стилів), після чого все працює.

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

Спосіб 4: Підключити шрифт до сайту за допомогою CSS

В інтернеті повно посібників на цю тему. Однак, перепробувавши п'ят з них я прийшов до плачевного результату. Мій TTF-шрифт нормально відображався тільки в IE. В інших браузерах його нещадно замінив Arial.

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

Щоб підключити до сайту шрифт за допомогою CSS нам знадобиться сам шрифт (файл) і онлайн конвертер http://onlinefontconverter.com/

Онлайн-конвертерів шрифтів може бути безліч. Одні закриваються, замість них з'являються нові, так що, якщо цього конкретного вже немає, пошукайте в пошукових системах за запитом типу «online font converter» і спробуйте скорнвертіровать шрифти там. В даному-же пості наведені конвертери використовується в якості прикладу.

1. Заходьте на сайт конвертера , Хапаєте наявний у вас шрифт і тягніть ось в таке віконце (воно зазвичай у правій колонці).

2. Скачуєте шрифт в 4-х варіантах: EOT, OTF, TTF і WOFF. Цього має вистачити. Браузер, в процесі рендеринга сторінки, сам вибере і завантажить той, який йому зручніше.

3. Заливаєте шрифти на сайт. Я створив для цього в корені сайту папку «f» і розмістив їх туди.

На даний момент onlinefontconverter.com переробили і жоден із запропонованих шрифтів він не конвертувати ((

Довелося скористатися сайтом font2web.com . Цей віддає всі необхідні шрифти відразу пачкою в одному архіві. Зручно!

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

@ Font-face {font-family: EtoMoiFont; src: url (/f/myFont1.eot), url (/f/myFont1.otf), url (/f/myFont1.ttf), url (/f/myFont1.woff); }

font-family: EtoMoiFont; - каже браузеру про те, як буде називатися Підвантажений шрифт. Назва придумайте самі.

src: url (/f/myFont1.eot), url (/f/myFont1.otf), url (/f/myFont1.ttf), url (/f/myFont1.woff); - вказує шлях і імена файлів шрифтів.

Чому шрифти йдуть саме в цьому порядку?

Першим, я поставив EOT. Цей формат використовують старі версії IE.

Другим - OTF. Це стислий формат шрифтів, який, по ідеї, важить менше.

Третім - TTF. Його розуміють практично всі браузери. Хоча, буває по різному. Наприклад в iOS він може не відкритися.

Останнім - WOFF. Це повинно добре читатися на маках, але перевірити ще не було часу.

5. позначає в файлі стилів, яким сімейством шрифтів виводити заголовки (в нашому випадку заголовки h2).

h2 {font-family: EtoMoiFont;}

Готово!

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

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

Ось що вийшло.

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

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

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

На цьому все. З вами був доктор Лексіум .
До нової зустрічі.