Установить шрифты на сайт

Установить шрифты на сайт

1212

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

Для подключения надо использовать код:
@font-face {
font-family: 'myfonts'; /*Любое имя для шрифта*/
src: local('☺'), url('/templates/svadba/css/webfont.ttf'); /*Папка, где лежит шрифт шрифта*/ }

Чтобы использовать этот шрифт пишите, к примеру так:
body {font-family: 'myfonts', Arial}

Упрощенный код подключения шрифта:
@font-face {
font-family: r1; /*Любое имя для шрифта*/
src: url(r1.ttf); /* Путь к файлу со шрифтом */ }

Иногда бывает, что стандартные ttf шрифты не работают - в этом случае либо они не поддерживают кириллицу, либо их надо преобразовать в расширение .otf, а затем использовать именно .otf версию шрифта.
Хороший онлайн преобразователь здесь: http://ru.fonts2u.com/font-converter.html

 

Кроссбраузерное подключение для старых IE и новых браузеров

Ужастные, старые браузеры IE не поддерживают подключение шрифтов. Для этого надо нужный шрифт перевести во-первых в другой формат .eot (можно здесь: http://www.fontsquirrel.com/tools/webfont-generator или здесь: ), а затем использовать следующий код:

/*для Internet Explorer*/
@font-face {
font-family: 'myfonts'; /*Любое имя для шрифта*/
src: local('☺'), url('/templates/svadba/css/webfont.eot'); /*Папка, где лежит шрифт шрифта*/ }

/*для других браузеров*/
@font-face {
font-family: 'myfonts'; /*Любое имя для шрифта*/
src: local('☺'), url('/templates/svadba/css/webfont.ttf'); /*Папка, где лежит шрифт шрифта*/ }

В этом коде сначала грузится .eot шрифт для IE, а для нормальных браузеров .ttf шрифт

| | Установить шрифты на сайт | Для установки нестандартных шрифтов на сайт можно воспользоваться как Гугл фонтс, так и загрузить их на сайт, а потом просто подключать. Второй способ | http://blogprogram.ru/wp-content/uploads/2014/11/1212-131x131.jpg

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

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


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>