Как скачать и установить шрифты в html?

Question

[Nik Faraday]

У меня есть проект, куда подключены шрифты ссылкой что-то типа такого

https://fonts.googleapis.com/css?family=Open+Sans:400,600

Мне нужно скачать эти шрифты, что-бы они нормально отображались при оффлайн работе. Как это можно сделать?

UPD: В гугле адекватной инфы кроме подключения по ссылке не нашёл.

Comments

[Ankhena]

и в том духе скажу, что адекватной инфы кроме подключения по ссылке на нашёл

Ну значит, точно имеет смысл всё таки научиться.
Первые две точно нормальные.
В следующий уже про ttf - это лишнее, но сути не меняет.
Актуальные форматы woff2 и woff.

Answer 1

[Vindicar]

Когда у меня встала такая задача, я загнал шрифт в CSS файл.

@font-face {
	font-family: 'My Super Font';
	src: url('data:application/octet-stream;base64,тут-идёт-woff-файл-шрифта-в-base64') format('woff');
	font-weight: normal;
	font-style: normal;
}

Ну и конечно, можно загнать сам CSS внутрь HTML через тег style. Хотя это изврат будет.

Answer 2

[Сергей delphinpro]

Как скачать?

Там же, в гугл шрифтах



В архиве будут все начертания и подтипы шрифта в ttf или otf формате (для компьютера).

Далее идёте на уже упомянутый transfonter и конвертируете нужные начертания в woff/woff2 форматы, скачиваете полученный пак и подключаете (внутри будет подготовленный css файл для подключения).

Comments

[Nik Faraday]

Сергей delphinpro, допустим, у меня есть уже готовая ссылка, которая шла с темплейтом, типа такой, что я кинул в вопросе. Что мне с ней делать?

[Сергей delphinpro]

Nik Faraday, вы видите в этой ссылке название шрифта. Ищите этот шрифт для скачивания. Многое доступно на гугл-фонтс. Первым делом идите туда. Я показал на скрине страницу шрифта OpenSans и кнопку для его скачивания.
Скачаете архив. В архиве будут шрифты в ttf формате в разных начертаниях.
Выбираете начертания Regular (400) и SemiBold (600) и их курсивные варианты. Четыре файла.
Загружаете эти ttf файлы в сервис конвертации в веб формат (transfonter).
Сервис выдаст вам архив с конвертированными шрифтами для web в форматах woff и woff2. Их уже можно подключать на сайт. Также сервис предоставит вам образец css файла с примером подключения шрифта.
Далее загружаете эти файлы на ваш сайт, в примере подключения исправляете пути к загружаемым шрифтам в соответствии с тем, как вы их расположили на своем сайте и пользуетесь.

Блин, писать пришлось дольше, чем всё это сделать...

[Nik Faraday]

Сергей delphinpro, таков путь) Спасибо )

Answer 3

[archelon]

1. на fonts.google.com или другом сайте скачиваете шрифт (download family).
2. конвертируете, например, через https://transfonter.org/
3. скачиваете результат конвертации: в архиве шрифты и css.
4. шрифты загружаете на сайт, css подключаете

Comments

[Ankhena]

скачиваете результат конвертации: в архиве шрифты и css.

Аккуратно, некоторые сервисы, во-первых, выдают кучу лишних форматов, во-вторых, ошибка в порядке подключения.

[Сергей delphinpro]

Ankhena, трансфонтер не глючит. а форматы выбираются пользователем перед конвертацией.
по дефолту Family support включен и два woff формата. Всё как надо.

[Ankhena]

Сергей delphinpro, этот конкретный не проверяла. Хорошо, если он качественный, я только рада.
Помню, что как-то поразилась, увидев, что конвертеры сначала подключают woff, потом woff2.

[Сергей delphinpro]

Ankhena, да, хороший сервис. Я на него перешел года три назад, или больше, когда белка начала отказываться конвертировать проприетарные шрифты.

[Nik Faraday]

archelon, допустим, у меня уже есть готовая ссылка, типа той, что я кинул в вопросе. Что мне с ней делать? Это всё же не создание собственных шрифтов мне нужно, а скачать уже готовые

Answer 4

[Noder SS]

Скачать можете на официальном сайте. После чего конвертите через font2web, Перекидываете в папку и в текстовых документах ищите font-face, ну, и используете по назначению, еще можно менять название в коде для удобного успользования