@procode
Разработчик

Как подключить к сайту TTF-шрифт в четырех разных начертаниях (regular, italic и пр.)?

Есть шрифт в TTF: https://fontsup.com/family/opel+sans.html

И мне нужно подключить его к сайту, вроде как Google Fonts.

Какова последовательность нужных шагов?

1. Например, чтобы подключить Фиру я размещаю на странице мета-тег:

<link href="//code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet" type="text/css" />


2. а потом в CSS:

font-family: 'Fira Sans';

Всё. Два шага.

А какие шаги нужно сделать чтобы подключить TTF в 4-х разновидностях: Regular, Italic, Bold, Bold Italic? И как их потом использовать?
  • Вопрос задан
  • 365 просмотров
Решения вопроса 1
Ankhena
@Ankhena
Нежно люблю верстку
Сейчас не нужно подключать ttf, нужны woff2 и woff

Подключать так (название файла должно быть одинаковым, меняется начертание и жирность)
@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        }

Использовать так:
div {
      font-family: OpenSans, Arial, sans-serif;
      font-weight: bold;
    }


Либо идете на google fonts и подключаете оттуда https://fonts.google.com/specimen/Open+Sans
Нужные вариации выбираются.

скрин

5e060dfebb82b632500233.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@shmaroder
https://creditpower.ru
Все то же самое. Надо 4 шрифта подключать с разными начертаниями.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы