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

Question

[Роман]

Есть шрифт в 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? И как их потом использовать?

Answer 1

[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
Нужные вариации выбираются.

скрин

Comments

[Роман]

Либо идете на google fonts и подключаете оттуда https://fonts.google.com/specimen/Open+Sans

В том и дело, что нужного мне шрифта (Opel Sans) нет на гугль фонтс. Так бы я голову не стал морочить конечно :)

За остальное - спасибо!

Скажите, а Italic как подключить?

Т.е. для болда мы меняем font-weight: 700; а для италика?

[Ankhena]

Роман, font-style: italic разумеется

И полно конвертеров из ttf в woff и woff2

[Роман]

...ага, font-style

вопрос снят))

еще раз спасибо!

Answer 2

[DENIS Kokorev]

Все то же самое. Надо 4 шрифта подключать с разными начертаниями.

Comments

[Роман]

то же самое что и где?

[DENIS Kokorev]

Роман, https://fonts.google.com/selection?subset=cyrillic - тут шрифты. Находишь нужные 4шт начертания, и либо качаешь на локалку либо онлайн подключаешь. Онлайн будет лучше с гугловских серверов. Быстрее будет работать. Там вроде кнопкой + можно сразу сет собрать и он тебе сразу css сгенерит для фонтов.

https://developers.google.com/fonts/docs/getting_s... - инструкция как подключать.

Юзай хром, включи перевод если с английским плохо. Там все просто. Но смысл, как ты и писал. Нюансы по начертаниям только. Там примеры есть - разберешся.