Как использовать шрифты не с google fonts

255
21 октября 2018, 00:50

До этого всё время делал в head ссылку на шрифт в google fonts вот так <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Теперь возникла необходимость использовать шрифт, которого там нет. В каком формате скачивать нужный шрифт и как его правильно подключить? Пытался так:

h1{
    font-family: 'Proxima Nova Bold', sans-serif;
    src: url('fonts/ProximaNova-Bold.eot');
    font-weight: normal;
    font-style: normal;
}

Но как я понял для этого нужно использовать @font-face. Что это такое и с чем его едят?)

Answer 1

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

@font-face{
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Semibold.eot');
  src: url('../fonts/ProximaNova-Semibold.eot?iefix') format('eot'),
  url('../fonts/ProximaNova-Semibold.woff') format('woff'),
  url('../fonts/ProximaNova-Semibold.ttf') format('truetype'),
  url('../fonts/ProximaNova-Semibold.svg#webfont') format('svg');
  font-weight: normal;
  font-style: bold;
}

в том случае когда у шрифтов разные файлы для отрисовки нормального начертания, жирного, италик и т.п. задаётся одинаковый font-family (например 'Proxima Nova') но в зависимости от начертания меняем font-weight и font-style

@font-face{
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Regular.eot');
  src: url('../fonts/ProximaNova-Regular.eot?iefix') format('eot'),
  url('../fonts/ProximaNova-Regular.woff') format('woff'),
  url('../fonts/ProximaNova-Regular.ttf') format('truetype'),
  url('../fonts/ProximaNova-Regular.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

а затем можете использовать стили как обычно

h1{
   font-family: 'Proxima Nova', sans-serif;     
   font-weight: bold;
   font-style: normal;
}
READ ALSO
Как реализовать это?
HTML

Как реализовать это?

Есть вертикальный список div'ов,с классом res и функция,которая происходит при наведении курсора мыши на этот блок

 268
Зациклить воспроизведения звука в chrome
HTML

Зациклить воспроизведения звука в chrome

есть подключенный файл звука через html5

 224
Как такое реализовать на canvase?
HTML

Как такое реализовать на canvase?

Нужно чтобы карта была в целом 1000на1000, но ВИДНАЯ часть лишь 100на100, как это сделать? Можно ли как-то указать координаты начала ВИДИМОГО экрана...

 233
Как это сверстать?
HTML

Как это сверстать?

Есть макет и мне интересно как можно сверстать навигацию(белый блок сверху)Размер макета 1600px, а отступы по 210px, получается размер контента(центровщика)...

 288