Домівка > CSS, How to (як зробити?), Magento > Кастомні шрифти в Magento – @font-face

Кастомні шрифти в Magento – @font-face

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

font-face

Найкращою технікою на даний час можна вважати @font-face оскільки він інтуїтивно підтримується браузерами та за допомогою певних маніпуляцій буде працювати майже у всіх браузерах.

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

Спочатку вам потрібно підключити сам шрифт у css файлі

@font-face {
        font-family: Sansation;
        src: url(/Sansation_Regular.otf);
}

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

h2 {
        font:24px/1.1em 'Sansation',Arial,sans-serif;
}

Цей метод потребує невеликої корекції щоб працювати у всіх браузерах.  Він вже роки підтримується IE, в Chrome, Firefox 3.5+, Safari 3.2+, Opera 10+. Проблема в тому що кожен з них використовує інший тип фалу для шрифту  ( EOT, OTF, TTF, SVG або WOFF ), тому щоб бути впевненими, що він працює в усіх браузерах, ми повинні підключити усі ці файли в нашому відключенні @font-face.

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

Після цього далі все досить просто. Створіть у вашій директорії skin директорію fonts та скопіюйте туди файли, які ви скачали.

Відкрийте ваш css файл та об’явіть @font-face:

@font-face {
	font-family: 'Sansation';
	src: url('../fonts/Sansation_Regular.otf');
	src: local('?'), url('../fonts/Sansation_Regular.woff') format('woff'), url('../fonts/Sansation_Regular.ttf') format('truetype'), url('../fonts/Sansation_Regular.svg#webfontzqb2Knxj') format('svg');
}

А потім сміливо використовуйте відключений шрифт.

.page-title h1 {
     font:24px/1.1em 'Sansation',Arial,sans-serif;
}

Зворотня сторона медалі

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

Загалом цей метод широко використовується зараз. Він є досить швидким і “легким” у порівнянні з іншими методами. Згідно статистики він підтримується на 92% платформ, тому не бійтеся його використовувати.


Сподобалася стаття? Підпишись на RSS або на e-mail розсилку. А ще приєднуйся до нас у Твітері @magentoua.

Вам також буде цікаво прочитати:

Advertisements
Категорії:CSS, How to (як зробити?), Magento Позначки:, , , ,
  1. Грудень 7, 2010 о 08:09

    А якщо порівнювати цей спосіб та куфон, хто вийде переможцем, на Вашу думку?

  2. Грудень 7, 2010 о 09:38

    maque :

    А якщо порівнювати цей спосіб та куфон, хто вийде переможцем, на Вашу думку?

    Цікаве питання. Безсумніву даний метод є більш ‘правильним’, оскільки по замовчуванню підтримується більшістю браузерів. На рахунок впливу на швидкість завантаження сторінки не можу ще нічого сказати, бо не тестував. Думаю покищо вибір залежить від особливостей конкретного проекту.

  3. Грудень 26, 2010 о 17:33

    Подключать внешние шрифты разумно если используется 1-2 оригинальных шрифта.
    Но если больше то будет долго грузится.
    Вот полезная ссылка с примерами http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

    Но все же думаю что предпочтительно использовать во эту методику
    http://typeface.neocracy.org/

    • Грудень 26, 2010 о 20:51

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

  4. Грудень 27, 2010 о 21:07

    Если заказчик сайта согласится на долгую загрузку и тяжолость сайта то ДА.
    Хотя вот если уж очень все дизайнерское то проще использовать картинки с словами 🙂

    P.S. Но все это “шашечки”. Magento выбирают из-за другого.

  5. Січень 22, 2011 о 12:23

    font-face кажете? Виглядає як звичайний Arial з декором.

  6. Січень 22, 2011 о 15:20

    Тарас :

    font-face кажете? Виглядає як звичайний Arial з декором.

    Вибачте, але не зовсім зрозуміло про що ви.

  1. No trackbacks yet.

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: