Домой / HELP / Как подключить нестандартный шрифт к сайту с помощью @font-face

Как подключить нестандартный шрифт к сайту с помощью @font-face

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило @font-face, есть еще варианты использовать Cufon или подгружать шрифты с Google Webfonts или Fontsquirrel, но на Google Webfonts и Fontsquirrel может не оказаться нужно шрифта, поэтому рассмотрим самый оптимальный вариант — подключение уникальных шрифтов с помощью @font-face.

Самый простой способ подключить шрифт — прописать в таблице стилей:

Здесь ‘PF Din CompPro’ — название шрифта, и далее вы можете указать этот шрифт для нужных элементов сайта, а fonts/pfdintextcomppro-medium-webfont.ttf — это путь к вашему шрифту, который лежит в папке fonts, важно, чтобы в названии файла шрифтов не было пробелов, лучше замените их на тире.

Это самый простой способ, но вот только работает он не во всех браузерах, и это большая проблема.

Каждый браузер поддерживает свои форматы шрифтов:
TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

Поэтому вам придется из одного своего шрифта в формате .ttf сделать еще несколько таких же шрифтов только в другом формате. Здесь поможет генератор шрифтов на сайте fontsquirrel.com. На этой странице загрузите свой шрифт, выберите настройки Optimal, отметьте чекбокс с подтверждением о легальности загружаемого шрифта (некоторые шрифты стоят очень много денег и у вас должно быть разрешение на их использование), затем нажмите кнопку «Download Your kit» и вы получите нужный архив со всеми форматами своего шрифта.

Из архива скачайте все форматы ваших шрифтов, по идее это 4 файла с расширениями .eot, .svg, .ttf и .woff, эти файлы скопируйте в папку fonts на своем сайте, так же в архиве будет лежать файл stylesheet.css — в нем уже будут прописаны все правила для подключения шрифтов, можете смело скопировать их в свою таблицу стилей, только не забудьте указать свои пути к файлам шрифтов, например, к папке fonts. Пример того, что получилось на одном из моих сайтов:

С такими параметрами шрифты отображаются в любых браузерах, включая всеми любимый IE-7-8-9.

Если вы используете нестандартные шрифты для кириллицы, т. е. для русских символов, и шрифт неправильно отображается на сайте, тогда возможно поможет генерирование шрифта с расширенными настройками, на странице http://www.fontsquirrel.com/tools/webfont-generator загрузите свой шрифт и выберите настройки «Expert». Там много настроек, все я не знаю, но внимательно прочитайте и выберите необходимые для вас, а для поддержки кириллицы выберите в блоке Subsetting: раздел Custom Subsetting… и отметьте чекбокс Cyrillic, а так же отметьте нужные для вас языки и форматы.

Для установки  Google Webfonts :

В Google есть отличные бесплатные шрифты для оформления сайта и любого проекта. Чтобы воспользоваться ими на своем сайте достаточно перейти в библиотеку, выбрать понравившиеся и кликнуть на кнопку под шрифтом.

Внизу этой страницы есть область встроенного кода. Этот код нужно скопировать и добавить в используемую вами тему в файл header.php сразу после открытия тега <head> ну а дальше по примеру:

google-fonts-code

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Сортировка по поступлению на страницах товаров Opencart

Как добавить «сортировка по поступлению» на страницах товаров и вообще где правиться это выпадающее меню …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *