Как подключить шрифт через css
Перейти к содержимому

Как подключить шрифт через css

  • автор:

Как подключить шрифты через CSS

С помощью правила @font-face можно легко подключить загруженные шрифты через CSS. Для этого в вашем css файле пропишите правило @font-face и кавычки (для задания свойств).

@ font — face <

В свойствах необходимо задать имя шрифта, путь к нему, насыщенность и стиль:

@ font — face < font - family : 'ИМЯ_ШРИФТА' ; /*Имя шрифта*/ src : url ( "ПУТЬ_К_ФАЙЛУ/ИМЯ_ФАЙЛА.ttf" ) format ( "truetype" ) ; /*Путь к фалу*/ font - weight : 500 ; /*Насыщенность*/ font - style : italic ; /*Стиль*/

Насыщенность (толщина) и стили шрифта бывают разными, но использовать можно только те, которые существуют у определенного шрифта. Например у Open sans доступны 5 типов насыщенностей: 300 (тонкий), 400 (стандартный), 600 (полужирный), 700 (жирный) и 800 (супер жирный). И 2 стиля: normal (стандартный) и italic (курсивный).

Не видит шрифты, подключенные через css, в чем проблема?

Если в html такой код спокойно работает, то в dle такой код не работает, и не работают шрифты.

  • Вопрос задан более трёх лет назад
  • 25074 просмотра

1 комментарий

Оценить 1 комментарий

soorax

АА, у меня была такая проблема, кинб сами шрифты в папку css ну или где у тебя главные стили сайта лижат) а после экспириментируй, либо

src: url(../fonts/OpenSans-Regular.ttf);
src: url(./fonts/OpenSans-Regular.ttf);
src: url(fonts/OpenSans-Regular.ttf);

Карочи путь меняй) а еще рекомендую сгенерировать его, www.fontsquirrel.com/tools/webfont-generator

Решения вопроса 1

Попробуйте конвертировать ваш скрипт здесь, у вас подключается только ttf шрифт он сработает не во всех браузерах; хороший пример подключения шрифта

так же проверьте что бы пути к файлам шрифтов были правильными

Ответ написан более трёх лет назад
Нравится 1 3 комментария
Javier Nazari @HackerProNoob Автор вопроса
На одном сработало, но кириллица походу слетела.

а шрифт кириллический?

Javier Nazari @HackerProNoob Автор вопроса
Ответы на вопрос 5
Web/Android developer

Ошибок нет , все должно работать.
Как говорится — какой вопрос — такой и ответ.
Захочется более результативного ответа — напишите немного подробностей, а желательно адрес где не работает , А ЕЩЕ ЖЕЛАТЕЛЬНЕЕ НЕ ЗАДАВАТЬ ПОДОБНЫЕ ВОПРОСЫ, ГДЕ ТРЕБУЮТСЯ ЭКСТРАСЕНСЫ , ТУТ ИХ НЕТ!

Ответ написан более трёх лет назад
Нравится 1 3 комментария
Javier Nazari @HackerProNoob Автор вопроса
javvatest.url.ph/main/1-post1.html , все тестовое.

Javier Nazari: а шрифты лежат в папку /templates/default/fonts/ ?если нет, то перенесите их туда и попробуйте

Javier Nazari: все шрифты выдают 404 ошибку.

Taraflex

Ищу работу. Контакты в профиле.
Глупый ответ
Подключайте гугловские шрифты

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

параметры запроса шрифта смотрите на https://www.google.com/fonts
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

У меня была подобная ситуация, проблема оказалась в том, что в linux регистр символов имеет значение, а у меня названия папок были в больших букв.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

oso_pardo

HTML, CSS, Junior JavaScript

Попробуйте указать полный путь (от корневой папки сайта) к шрифту.
Например у меня для CMS Joomla путь к шрифту указан так: url(/templates/имя папки с шаблоном/css/fonts/шрифт.TTF).

Ответ написан более трёх лет назад
Javier Nazari @HackerProNoob Автор вопроса
Не помогало.
skylinetmk @skylinetmk

В общем у меня джумла после одновления видими перестала подгружать шрифт таким способом
url(‘/templates/.мой шаблон/fonts/cassandra.ttf’);
тогда попробовав загрузить его по пути получил отказ joomlы и ошибку 404. Понял что перенаправление.
Открыл .htaccess и добавил туда в эту строку ttf
RewriteRule !(js|ico|gif|jpg|png|ttf) index.php [QSA,L] которая гооврит о том, чтоб перенапрявлять все страницы, ссылкающиеся на любые расширения кроме указанных, на index.php

В общем вуаля, все работает. Заходите на мой сайт и заказывайте работы по песочной аннимации!)))
Заходите на мой сайт и заказывайте работы по песоч.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • час назад
  • 7 просмотров

Работа с шрифтами в CSS

Изображение Работа с шрифтами в CSS в соцсети TenChat

Шрифты являются одним из важнейших элементов дизайна веб-страниц. Они могут существенно повлиять на восприятие контента и улучшить пользовательский опыт. В CSS есть несколько способов работы со шрифтами, которые мы рассмотрим в этой статье.

1. Подключение шрифтов

Перед тем, как начать работу со шрифтами, необходимо подключить их к странице. Существует несколько способов подключения шрифтов:

— С помощью тега . Этот способ наиболее распространен и позволяет подключить шрифты из внешних источников, таких как Google Fonts или Adobe Fonts.

— С помощью правила @font-face. Этот способ позволяет подключить шрифты, которые находятся на сервере. Например:

font-family: ‘Open Sans’;

2. Использование системных шрифтов

CSS позволяет использовать системные шрифты, которые установлены на компьютере пользователя. Это может быть полезно, если вы хотите, чтобы ваш сайт был более доступным и быстрее загружался. Для этого используется свойство font-family:

font-family: Arial, sans-serif;

В этом примере мы указываем, что текст на странице должен отображаться шрифтом Arial, а если его нет на компьютере пользователя, то должен использоваться любой другой шрифт из семейства sans-serif.

3. Изменение размера шрифта

Размер шрифта можно изменять с помощью свойства font-size. Оно может принимать значения в пикселях, процентах или em. Например:

4. Изменение начертания шрифта

CSS позволяет изменять начертание шрифта с помощью свойства font-weight. Оно может принимать значения от 100 до 900, где 400 — это нормальное начертание, а 700 — жирное. Например:

5. Изменение стиля шрифта

CSS позволяет изменять стиль шрифта с помощью свойства font-style. Оно может принимать значения normal, italic или oblique. Например:

6. Изменение межстрочного интервала

Межстрочный интервал можно изменять с помощью свойства line-height. Оно может принимать значения в пикселях или процентах. Например:

7. Изменение цвета шрифта

Цвет шрифта можно изменять с помощью свойства color. Оно может принимать значения в формате HEX, RGB или названия цветов. Например:

Работа со шрифтами в CSS — это важный элемент дизайна веб-страниц. Правильно подобранные шрифты могут существенно повлиять на восприятие контента и улучшить пользовательский опыт. В CSS есть множество свойств, которые позволяют изменять размер, начертание, стиль, межстрочный интервал и цвет шрифта.

Как подключить шрифт к сайту html +css

Одна из первых задач, которая встает перед вебмастером при создании нового проекта — как подключить шрифт к сайту. С помощью html и css шрифт можно подключить как напрямую с хостинга, так и удаленно при помощи различных сервисов типа гугл-шрифтов (GoogleFonts). Так же есть много других ресурсов, которые помогут быстро подобрать шрифты для вашего сайта:

  • Fonts-online — хранилище шрифтов, доступных для скачивания.
  • Canva.com — удобный сервис для подбора шрифтовых пар.
  • GoogleFonts — сервис от google с возможностью интеграции шрифтов на сайт через API.
  • Fontstorage — русскоязычный сервис, аналогичный по функционалу GoogleFonts. Можно скачивать шрифты или подключать напрямую к сайту через API.

Как подключить шрифт с помощью GoogleFonts

1 Переходим на GoogleFonts (https://fonts.google.com/), выбираем нужный, после чего откроется такое окно (рис.1):

Нажимаем на кнопку «select this style» (выделена красным), после чего справа появится всплывающее окно (рис. 2):

Подключить шрифт googlefonts

Если окно не появилось, то нажимаем на пиктограмму из трех квадратов и плюса (подчеркнута красным).

2 Выбираем вкладку Embed (подчеркнута красным) и копируем код для вставки на сайт (подсв. синим) (рис.3)

3 После того, как код скопирован, вставляем его в хедер вашего сайта между тегами .

Или переключаемся на вкладку @import (чуть правее) и копируем код из этого же окошка, но его вставляем в файл style.css вашего сайта.

После подключения шрифта, в css — файле у нужного элемента прописывается следующее свойство ( на примере заголовка h1):

h1 <
font-family: ‘Open Sans’, sans-serif
>

Не рекомендуется подключать большое количество google-шрифтов одновременно, т. к. это негативно отразится на скорости загрузки сайта.

Как подключить шрифт к сайту прямой ссылкой в хедере

1 Через сервис Fonts-online или GoogleFonts скачиваем шрифт, далее загружаем его через файловый менеджер хостинга в папку fonts вашего сайта. Если у вас такой папки нет, то ее необходимо создать.

2 После того, как папка создана и шрифт загружен, необходимо прописать путь к нему в хедере вашего сайта (на примере wordpress) между тегами .

В WordPress эта строчка вносится в файл header.php.

Некоторые браузеры не поддерживают определенные форматы шрифтов. Поэтому, если вы все сделали правильно, но шрифт не подключается, то попробуйте переконвертировать его в формат otf , woff или svg через любой онлайн — сервис для конвертации.

Проверить поддержку шрифтов браузером можно через этот сервис. Для этого необходимо ввести в поисковую строку формат шрифта (otf например).

Чтобы шрифт корректно отображали все браузеры, рекомендуется одновременно подключать несколько форматов (otf, svg, woff).

Как подключить шрифт через файл стилей css

1 Этот способ более предпочтителен и отличается от предыдущего только тем, что шрифт подключается не через хедер, а через css. Для этого в файле style.css вашего сайта прописывается такой код:

@font-face <
font-family: ‘open sans’;
src: local(‘opensans.otf’), /*проверяем наличие шрифта на компьютере пользователя*/
url(‘../путь-до-папки/fonts/opensans.otf’); /*путь до папки со шрифтом*/
>

При подключении шрифта к сайту через css всегда следует использовать конструкцию src: local(‘название шрифта’), т.к. она проверяет наличие шрифта в системе пользователя. Если он будет найден, то тогда загрузка внешних шрифтов производиться не будет.

Подключение шрифта через css — самый практичный вариант из всех вышеперечисленных, т. к. здесь можно задать жирность шрифта, стиль и другие свойства. Например:

@font-face <
font-family: ‘open sans’;
src:local(‘opensans.otf’),
url(‘fonts/opensans.otf’);
font-weight: 400; /*задаем жирность шрифта*/
font-style: normal; /*задаем стиль*/
>

2 Для подключения сразу нескольких форматов шрифтов, необходимо в css файл добавить такой код:

@font-face <
font-family: ‘open sans’;
src: local(‘opensans.otf’),
url(‘fonts/open sans.woff2’) format(‘woff2’),
url(‘fonts/open sans.woff’) format(‘woff’),
url(‘fonts/open sans.ttf’) format(‘truetype’);
font-weight: 400;
font-style: normal;
>

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

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