Как подключить локальный шрифт .ttf в css?
Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то.
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!
- Вопрос задан более трёх лет назад
- 20881 просмотр
Комментировать
Решения вопроса 1
Оптимизирую PageSpeed & Performance
Конвертер в другие форматы: onlinefontconverter.com
Подключить можно таким кодом (в т.ч. для браузеров-динозавров):
@font-face < font-family: 'Web font'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Новейшие браузеры */ url('webfont.woff') format('woff'), /* Новые браузеры и IE9+ */ url('webfont.ttf') format('truetype'), /* Старые Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Древние Safari, iOS, Android */ font-weight: normal; font-style: normal; >Обычно достаточно:
@font-face < font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; >Форматы WOFF и WOFF2 — это контейнер с более эффективным, чем ttf сжатием шрифта, как следствие шрифт грузится скорее. Там, где нужно использовать шрифт укажите правило: «font-family: ‘Web font’; »
@font-face
@font-face CSS @-правило (en-US) позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local() , с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url() . @font-face позволяет разрабатывать контент не ограничиваясь набором «безопасных» шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local() , чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US) .
@font-face font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); >
Синтаксис
Descriptors
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.
Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format() : src: url(ideal-sans-serif.woff) format(«woff»), url(basic-sans-serif.ttf) format(«opentype»);Список доступных форматов: «woff» , «woff2» , «truetype» , «opentype» , «embedded-opentype» , и «svg» .
Диапазон Unicode кодов, который будет использоваться в шрифте.
Formal syntax
@font-face =
@font-face < >
Примеры
Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
html> head> title>Web Font Sampletitle> style type="text/css" media="screen, print"> @font-face font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf"); > body font-family: "Bitstream Vera Serif Bold", serif; > style> head> body> This is Bitstream Vera Serif Bold. body> html>
В этом примере используется локальный пользовательский шрифт «Helvetica Neue Bold»; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием «MgOpenModernaBold.ttf»:
@font-face font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; >
MIME-типы шрифтов
| Формат | MIME-тип |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open File Format | font/woff |
| Web Open File Format 2 | font/woff2 |
Примечания
- Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
- @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
.className @font-face font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; > >
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-face-rule |
Browser compatibility
BCD tables only load in the browser
See also
- About WOFF (en-US)
- Everythingfonts font-face generator
- FontSquirrel @font-face generator
- Beautiful fonts with @font-face
- Open Font Library
- Microsoft Developer Network (MSDN) @font-face reference
- When can I use WOFF?
- When can I use SVG Fonts?
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как подключить шрифт в css локально
Если на сайте используется шрифт, которого не окажется на устройстве пользователя (компьютер, ноутбук, планшет, смартфон), то шрифт будет заменён на стандартный. Следовательно дизайн не будет соответствовать действительности, а во многих случаях вёрстка ломается и выглядит некорректно
При подключении шрифта эта проблема решается, так как вместе с сайтом, загружаются используемые шрифты и сайт отображается корректно
Рассмотрим два способа подключить веб-шрифты
- Подключить веб-шрифт со стороннего сервиса, например Google Fonts через
- Подключить файлы шрифтов через @font-face
Подключение веб-шрифтов с Google Fonts
Google Fonts содержит большое количество бесплатных шрифтов, которые часто используются в дизайне макетов
Заходим на официальный сайт Google Fonts и выбираем шрифт
Далее выбираем начертания веб-шрифта, например Regular (стандартной толщины) и Light (чуть более узкий, чем стандартный) — нажимаем на + Select this style. (Если нужно снять выбор — нажимаем на — Remove this style)
В правом верхнем углу нажимаем на иконку выбранных шрифтов
В открывшемся окне выбираем способ подключения и копируем код расположенный ниже
Вставляем скопированный код в
Чуть ниже копируем CSS свойство для использования подключеного шрифта
Используем подключенный шрифт в файле стилей CSS
Удобство данного способа в том, что добавив только одну строку в , сразу можно использовать данный шрифт
Минусом этого способа является зависимость от сервиса Google Fonts. Если сервис перестанет работать, то подключенные шрифты не загрузятся
Данный способ полезен при создании быстрых прототипов верстки, для своих проектов/экспериментов
Подключение через @font-face
В дизайн макете сайта может быть использован нестандартный шрифт, который недоступен в Google Fonts. В таких случаях дизайнер вместе с дизайн макетом предоставляет файлы используемых шрифтов или скачиваете шрифт самостоятельно
Google Fonts также позволяет скачивать бесплатные шрифты, чтобы хранить на хостинге вместе с проектом и подключать их через @font-face
На странице выбранного шрифта, сверху справа нажимаем на кнопку Download family
Разархивируем скачанный zip-файл и видим файлы выбранного шрифта всех возможных его начертаний в формате *.ttf
У веб-шрифта должен быть определенный формат, который будет поддерживаться браузерами. На данный момент самый оптимальный формат веб-шрифтов — *.woff (Поддержка формата WOFF)
Чтобы конвертировать файлы формата *.ttf в формат *.woff воспользуемся бесплатным онлайн сервисом Transfonter
Переходим на официальный сайт сервиса Transfonter и нажимаем кнопку Add fonts
В открывшемся окне ищем папку в которую был разархивирован скачанный zip-файл, и выбираем необходимые начертания шрифта
Выбранные начертания шрифта будут загружены в сервис для конвертирования
Ниже расположены настройки конвертирования. Справа в списке форматов шрифтов выбираем только формат WOFF. Все остальные настройки оставляем по-умолчанию
Далее нажимаем кнопку Convert
После того, как шрифты будут сконвертированы, ниже слева появится ссылка Download для скачивания
Скачанный zip-файл содержит сгенерированные стили CSS для подключения шрифтов и *.woff файлы шрифтов
Файлы шрифтов копируем в папку fonts нашего проекта. Названия файлов шрифтов не изменяем.
Файл stylesheet.css содержит следующие сгенерированные стили
Копируем все содержимое файла stylesheet.css в самое начало нашего основного файла стилей CSS.
Так как основной файл стилей находится в папке css, отличной от папки, где лежат файлы шрифтов, необходимо внести некоторые изменения — в url добавляем относительный путь до папки fonts (остальные свойства не меняем)
Аналогично используем подключенный шрифт в файле стилей CSS
Преимущество данного способа в том, что веб-шрифты храняться на хостинге вместе с проектом, и не зависят от сторонних сервисов
Как подключить шрифт к сайту примеры
Размещаем шрифт в папке и прописываем путь к файлу, нажмите оп ссылке — посмотрите, как проверить правильность написания пути до шрифта. Если начинается загрузка шрифта, то всё сделано правильно!(Основная причина не работающего правила @font-face) Если ничего не происходит, то путь написан не верно:
Далее собираем конструкцию, которая и подключит наш шрифт к сайту
После подключения. нам нужно написать какой-то стиль, чтобы его применить:
Как правильно подключить шрифты в CSS на сайте?
Всем привет дорогие друзья! Наконец то к сайту вернулась посещаемость, а то с праздниками народ вообще подзабил на полезные статьи. Ну это понятно, кто в праздники будет что-то читать.
Сегодня для вас подготовил хорошую статью с видео уроком о том, как подключить любые шрифты, в том числе и Google, через css к html сайту.
Давайте разберемся на практике.
Подбираем нужный шрифт
В начале вам нужно будет выбрать понравившийся шрифт. Свое внимание я остановил на Roboto Condensed. Он красивый и стильный, настоящий коммерческий шрифт. Скачать вы можете его прямо здесь (вирусов нет, безопасно).
Фишка его еще и в том, что он есть и кириллический и также отлично отображается в браузерах.
Отлично! Пол дела сделано. Теперь переходим к следующему шагу.
Создаем папку для шрифтов
Теперь нам нужно создать папку куда мы его поместим. В идеале лучше создать так как есть, т.е «Fonts». Это общепринято и очень удобно. Точно не запутаетесь ��
Файл кидаете без изменений, т.е у вас он в этой папке должен быть следующего вида – roboto . ttf
Подключаем шрифт через CSS
Теперь идем в таблицу стилей CSS нашего сайта на html и в самом верху пишем следующее правило для подключения шрифтов:
Путь относительный и выглядит имено так url ( . . / fonts / Roboto . ttf ) ;
@ font — face — это сообщение браузеру, что будут подключаться сторонние шрифты на сайте.
Теперь чтобы применить стиль шрифта к всему тексту (параграфы, заголовки, ссылки, списки и т.д) мы сделаем одну маленькую хитрость. Ведь вы все знаете, что в CSS используется правило наследование, т.е родительский тег распространяет свое влияние на все дочерние элементы. Этим мы и воспользуемся и я объясню почему.
Во-первых, мы пропишем в css правило только один раз и оно будет распространяться автоматически на все другие элементы и классы от родителя к «дочкам».
Во-вторых, мы значительно упрощаем нашу таблицу, делая ее легкой, а если ваш сайт загружается быстро, то это безусловный плюс в карму и вы будете выше в поиске при одинаково полезном контенте и правильной оптимизации.
Теперь как нам это сделать? Все просто. Мы знаем, что самый главный тег в веб структуре это < html >и < body >.
«Как правильно установить любые шрифты на сайт и где их найти?»
При оформлении созданного сайта необходимо уделить должное внимание выбору шрифтов, поскольку люди посещают страницы с целью получить информацию именно через прочтение, поэтому нужно сделать этот процесс максимально комфортным. Разумным решением будет использовать два основных шрифта при оформлении сайта. Один – для заголовков, а другой – для основного текста. Таким образом, посетитель будет легко различать структуру контента, а сам сайт будет более целостным. Для заголовка, например, можно использовать шрифт Roboto Black, а для основного текста – Roboto Light или другие варианты. Важно знать, что шрифт, который вы установили на своем компьютере, не обязательно правильно отрисуется у других. Если такой же шрифт не установлен у читателя, то его браузер отобразит либо альтернативу вашему шрифту, либо значение по умолчанию.
Кстати, эта фраза для демонстрации всех кирилических шрифтов выбрана не случайно. Именно она содержит сразу весь русский алфавит и предоставляет возможным оценить отрисовку каждой буквы в контексте одного предложения.
Как установить сразу несколько шрифтов
Очередь шрифтов – указание в стилях сайта не только, например, «Roboto», но и ряд других, как вариант: «Roboto, Serif, Arial». В таком случае, браузер первым попытается использовать шрифт Roboto, если он не установлен на компьютере пользователя, то следующим будет Serif, за ним Arial, а затем шрифт, который система сама обозначила по умолчанию. Пример реализации, фрагмент из style.css моего сайта:
Как видно из кода, основным шрифтом является Open Sans Light, в случае возникновения с ним каких-либо проблем, браузер отобразит стандартный serif, который есть в каждой сборке Windows. Зачем это нужно, если система сама поставит шрифт по умолчанию? Затем, что стандартный serif визуально гораздо больше похож на мой кастомный Open Sans, и в целом, потери отображения контента будут не такими большими, как в случае с отрисовкой совершенно другим шрифтом.
Чтобы совсем обезопасить себя от метаморфоз с отображением, достаточно просто прописать прямую ссылку на используемый шрифт в файл стилей Вашего сайта. Делается это очень просто:
Пример из таблицы стилей моего сайта:
После указания в style.css прямой ссылки на файл шрифта, остаётся лишь применить его, указав в том же файле стилей font-family для всего сайта или отдельного элемента. В качестве примера, применим ко всему тексту на сайте:
Где взять красивые шрифты для сайта?
Поиск необходимых шрифтов, порой, самое долгое и интересное занятие. Ведь их на сегодняшний день просто великое множество, и такое же множество похожих между собой видов. Определиться с этим крайне непросто, но ведь нужно знать, откуда брать источник для выбора.
AllFont — cервис, которым я пользуюсь лично. Это огромная библиотека шрифтов, в том числе, что немало важно, и кирилических. Сайт удобен тем, что Вам вовсе не обязательно скачивать шрифт для того, чтобы узнать как он будет выглядеть в работе — достаточно лишь ввести желаемую фразу в качестве примера, и Вы сразу получите представление о шрифте. Так же на странице каждого шрифта дополнительно есть изображение со всеми символами и буквами русского и английского алфавита, цифрами и самыми распространенными спецсимволами.
Желаю Вам удачи в оформлении
Таким образом, зная эти несколько нюансов, вы сможете оформить сайт на свой вкус и предотвратить возможные недоразумения при его отображении на компьютерах пользователей.
Похожие публикации:
- Как открыть css файл в браузере
- Как отменить наследование в css
- Что значит display block в css
- Что называется служебными словами в алгоритмическом языке
Как локально подключить шрифты в css
Искал в интернете , как подключить шрифты к сайту, с ссылкой на локальный файл, но полного ответа нигде не нашел Объясните пожалуйста по пунктам и в полном объеме, что нужно сделать, чтобы подключить шрифты к html и css файлам
Находите или создаете файлы шрифтов (в разных форматах, для кросс-браузерности). Например, у вас шрифт «Шо-то-там» — вам понадобятся файлы шрифта. Кладете их в папку, например, /your-site/fonts. Получаете в ней такой набор файлов:
- st-Regular.ttf
- st-Italic.ttf
- st-Bold.ttf
- st-Regular.woff
- st-Italic.woff
- st-Bold.woff
Создаете в css-файле столько директив @font-face, сколько файлов шрифтов у вас задействуется:
Применяете в стилях нужных элементов свойство font-family , указав «затычку» на случай неподгружения файлов шрифта:
Подключение шрифта к странице: как нужно делать сейчас
Возможность подключать шрифты к странице — это здорово! Во времена IE8 это еще и было прекрасной возможностью использовать векторную графику для иконок (IE8 поддерживает подключаемые шрифты, но не поддерживает SVG). Появилось много способов сконвертировать шрифт, в том числе, он-лайн-конвертеры, лучший из которых — Font Squirrel. Одна беда: люди просто копируют получаемый из генератора код, ничуть о нём не задумываясь.
Как сейчас нужно подключать шрифты
Как подключить несколько файлов одного шрифта и использовать одно название шрифта
Нередко, веб-шрифт — это несколько файлов: один файл — одно начертание (файл_1 — плотность 400, нормальный; файл_2 — плотность 400, италик, и так далее). А хочется везде при указании шрифта использовать одно его название, без упоминания в названии слов normal , italic , light и т.п., а указывать это в соответствующих CSS-свойствах.
Вариативные шрифты, для которых файл всего один, а вариантов начертания внутри много — отдельная тема, этот материал не о них.
Подключаем кучу файлов шрифта с указанием одного и того же имени, но разных font-weight и font-style :
И далее при указании селекторам шрифта и плотности, можно использовать одно имя, но разные плотности.
Как уже неактуально подключать шрифты
Для большинства проектов этот код неактуален, но может потребоваться для всякого старья с кроссбраузерностью IE8+ (привет, трилобиты!).
Если нужно взять шрифты с Google Fonts, но подключать их со своего хоста
google-webfonts-helper — превосходный сервис, который и шрифты даст скачать, и покажет код как их оптимальнее всего подключать (если забыть о FOUT).
Как подключить шрифт к сайту?
Привет, друзья! В данной статье хотелось бы поговорить о том, как подключить шрифты к вашему сайту.
Подбираем нужный шрифт
Сперва наперво нужно скачать интересующий нас шрифт. Я, как и множество вебмастеров, рекомендую скачивать шрифты Google.
Для этого перейдите по ссылке https://fonts.google.com/ и выберите то, что вам нравится. Мне приглянулся Poiret One и поэтому я скачиваю его.
Подключаем нужный шрифт
Теперь скачиваем шрифт и подключаем его к сайту.
Тут я различаю два подхода:
- Подгрузить шрифт напрямую с сайта Google.
- Подключить шрифт локально, скачав его себе на сайт.
Итак, давайте разберем эти два способа:
Способ 1: Как подключить шрифт Google к сайту?
На сайте Google нажимаем «красный крест», чтобы вышло окно добавления шрифта.
Во вкладке «Embed» мы видим, что Google предлагает два подхода к добавлению шрифта:
- Через вставку кода
- Через вставку медиа команды @IMPORT в файле css темы либо на странице в теге style.
Выбираем оптимальный вариант подключения. Поскольку мне нужно подключить шрифт ко всем страницам сайта, я добавляю медиа запрос в основном файле style.css.
Способ 2: Как подключить шрифт к сайту локально?
Теперь давайте разберем, как подключить шрифт к сайту локально, то есть скачав на компьютер, а затем на сервер.
Итак, нам понадобится все тот же Google сайт со шрифтами, но теперь при подключении шрифта перейдем ко вкладке «Customize».
Здесь из списка доступных языков мы можем выбрать те которые наш сайт будет поддерживать. Latin — это латиница (англ.язык, в частности), Cyrillic — кириллица (для русского языка). Обратите внимание на то, что если шрифт не поддерживает кириллицу, то на сайте с русским языком он работать не будет. Также большинство шрифтов поддерживают разные «оттенки» жирного шрифта? курсива и проч. Вы вольны выбрать то, что захотите.
Далее, после того, как выбор сделан, нажимаем на стрелку и скачиваем шрифт.
Переходим в папку темы на сайте и создаем там папку fonts, например. Пускай эта папка содержит все подключенные к теме шрифты.
Извлекаем содержимое архива и закачиваем к себе на сервер в папку fonts.
Пусть каждый шрифт будет сложен в свою папку и иметь адрес типа: /fonts/Poiret One. В папке шрифта содержатся файлы *.tff, отвечающие за отображение его начертания на сайте. В моем случае это оказался один файл PoiretOne-Regular.ttf. Его то нам и нужно подключить.
Переходим в файл css темы и для подключения шрифта к сайту добавляем код:
Будьте внимательны: в пути не должно быть пробелов, заменяйте их символами.
Замечу также что для каждого нового шрифта вам надо создавать новый запрос @font-face.
Готово! Шрифт подключен к вашему сайту и не зависит от google сервисов.
Выводы:
Мы разобрали два доступных способа подключения шрифтов к сайту. Если посчитать, их было даже больше :).
Какой из них использовать — решать вам. Если вы не хотите запорачиваться с кодом и файлами шрифта, то используйте медиа запрос в файле css вашей темы. Если вы не хотите зависеть от google и его сайта шрифтов, то скачивайте и подключайте шрифты локально на ваш сайт.
Если вам понравилась данная статья — ставьте лайк! Делитесь ею в соцсетях, если она была вам полезна. Пишите комментарии, если вам есть что сказать.
Как подключить шрифт Google Fonts локально
Сегодня рассмотрим очень простой способ локального подключения шрифта библиотеки Google Fonts на примере Open Sans с помощью сервиса Google Webfonts Helper.
В настоящее время многие сайты используют шрифты библиотеки Google Fonts, которые подключаются одним из двух способов — путем размещения ссылки непосредственно в шапке шаблона сайта:
или с помощью правила @import в файле стилей шаблона сайта:
При использовании любого из данных способов существуют определенные недостатки:
- Зависимость скорости загрузки сайта от доступности серверов Google Fonts,
- Определенное количество http-запросов к серверам Google Fonts и, как следствие, небольшая «задержка» загрузки сайта,
- Невозможность компрессии файла стилей Google Fonts и кэширования шрифтов (как локальных статических файлов).
Сервис Google Webfonts Helper
Шрифты библиотеки Google Fonts можно подключить локально с помощью сервиса Google Webfonts Helper. Для примера рассмотрим процесс локального подключения шрифта Open Sans.
- На странице Google Webfonts Helper в окне поиска введите Open Sans и выберите шрифт из выпадающего списка.
- На странице шрифта выберите тип кодировки (для русскоязычных сайтов) и (по умолчанию), а также насыщенность и начертание шрифта (скриншот #1).
- Перед копированием стилей (скриншот #2) проверьте корректность пути к каталогу со шрифтами относительно файла стилей шаблона вашего сайта и, если необходимо, внесите изменения в поле Customize folder prefix (скриншот #3).
- Скачайте файл, распакуйте и разместите шрифты в соответствующем каталоге вашего сайта.
Свойство font-display: swap
В отчете Google после проверки сайта в сервисе PageSpeed Insights настоятельно рекомендуется настроить отображение всего текста во время загрузки веб-шрифтов с помощью свойства font-display: swap. Обратите внимание, что данная рекомендация на показатели производительности сайта напрямую не влияет.
- auto — стратегия загрузки шрифта определяется пользовательским агентом,
- block — для шрифта задается короткий период блокировки и бесконечный период подмены,
- swap — для шрифта не задается период блокировки и задается бесконечный период подмены,
- fallback — для шрифта задается очень короткий период блокировки и короткий период подмены,
- optional — для шрифта задается очень короткий период блокировки и не задается период подмены.
Что ж, для получения нескольких баллов и уважения со стороны Google, добавьте свойство font-display: swap во все правила @font-face. Таким образом, окончательная версия CSS-кода должна выглядеть примерно следующим образом:
После компрессии (например, с помощью сервиса CSS Compressor) и вставки CSS-кода в файл стилей шаблона вашего сайта вы можете задать время кэширования шрифтов (как локальных статических файлов) и, тем самым, еще немного улучшить показатели производительности вашего сайта.
Похожие публикации:
- Как сделать блоки друг под другом css
- Как сделать вложенность в css
- Как сделать высоту блока по содержимому css
- Как сделать другой шрифт в css