Как подключить загруженные на хостинг шрифты к своему сайту?

Question

[Александр Джура]

Добрый день всем.
По образованию я вообще строитель, но вот меня угораздило заняться подключением шрифтов к сайту. И что-то идет не так, не могу понять что. Я расскажу пошагово какие действия cделал, может, кто-нибудь, подскажет в чем проблема у меня.

Есть бесплатный хостинг. Открыл на нем сайт. Сделала папку "fonts", в папку загрузил файл шрифта: pragmatica.ttf
Далее в файле index.html прописал такие строчки:

<style>
@font-face {
    font-family: pragmatica;
    src: url (/fonts/pragmatica.ttf); 
   }
   
p { 
    font-family: pragmatica; 
   }
</style>

Не работает. Куда двигаться?

Comments

[Lynn «Кофеман»]

> Куда двигаться?

https://freelance.habr.com/

[Дмитрий]

открыть средства разработчика в браузере во вкладке сеть посмотреть они вообще грузятся?

[Dymok]

Lynn «Кофеман», зачем так, если человек задал конкретный вопрос и описал свои попытки?

Answer 1

[Сергей Арсентьев]

подключайте шрифт в формате woff2 и woff
то есть:

@font-face {
  font-family: "pragmatica";
  font-display: swap;
  src: url("fonts/pragmatica.woff2") format("woff2"),
	   url("fonts/pragmatica.woff") format("woff");
  font-weight: 400;    
}

Comments

[Александр Джура]

Спасибо. Так заработало. А вы не могли бы пояснить: ttf принципиально не будет работать?

[Сергей Арсентьев]

Александр Джура, по идее можно и ttf
у меня работает и так, и эдак.
просто woff2 обычно меньше занимает по размеру, как бы на сегодняшний день стандарт - https://qna.habr.com/q/880081

@font-face {
  font-family: "pragmatica";
  font-display: swap;
  src: url("fonts/pragmatica.ttf") format("truetype");	   
  font-weight: 400;    
}

[Антон Р.]

Сергей Арсентьев, а не знаете, шрифты кэшируются если использовать свои, а не тянуть с гугла?

[Сергей Арсентьев]

Антон Р., да, кешируются, в том и смысл НЕ тянуть их из гугла, а кешировать через правила htaccess, чтобы больше попугаев в pagespeed было.