Подключить шрифт

[enique79]

Здравствуйте! Подскажите как подключить подключить дополнительный шрифт? Хочу выделить заголовки.

[mpn2005]

В 28.05.2022 в 07:22, enique79 сказал:

Здравствуйте! Подскажите как подключить подключить дополнительный шрифт? Хочу выделить заголовки.

Добрый день.

Только для заголовков не стоит грузить отдельный шрифт.

И по дизайну не очень вариант - делать элементы страницы разными шрифтами.

 

А технически - можно подключить шрифт в шаблоне шапки сайта.

[enique79]

Подумал, что наверное не стоит перегружать. Спасибо

[DEVAGENCY]

Если использовать только один тип шрифта, сделать preload и font-display: swap то практически не будет заметно, а таким образом можно неплохо освежить дизайн, но конечно шрифт должен быть "в тему"

 

Тот-же google fonts в header сайта

 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

 

и в css:

 

font-family: 'Roboto', sans-serif;

 

[enique79]

В 29.05.2022 в 04:00, DEVAGENCY сказал:

Если использовать только один тип шрифта, сделать preload и font-display: swap то практически не будет заметно, а таким образом можно неплохо освежить дизайн, но конечно шрифт должен быть "в тему"

Спасибо. А если шрифт загрузить на сервер, то можно его подтянуть стилями?

[DEVAGENCY]

В 29.05.2022 в 07:42, enique79 сказал:

Спасибо. А если шрифт загрузить на сервер, то можно его подтянуть стилями?

 

Конечно, через @font-face в CSS, подробнее можно почитать например здесь — https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

 

[Panda58dev]

В 28.05.2022 в 23:00, DEVAGENCY сказал:

Тот-же google fonts в header сайта

Только лучше так не делать, на моей памяти, google fonts раза 2-3 падал. Лучше всё держать на сервере, если уж очень жаль места, лучше использовать форматы woff/woff2, но тогда поддержка старых браузеров вряд ли будет. Подключать шрифты с сервера довольно легко:
 

@font-face {
  /*Тут можете задать любое имя, которое будет указывать на подключаемый шрифт*/
  font-family: "Roboto";
  /*Тут стандартные стили для шрифта*/
  font-style: normal;
  font-weight: 400;
  /*Здесь указваем путь до скаченного шрифта в разных форматах*/
  /*Чем выше (раньше) указан шрифт, тем больше его приоритет*/
  src: url("/fonts/roboto.woff2") format("woff2"),
       url("/fonts/roboto.woff") format("woff"),
       url("/fonts/roboto.svg") format("svg"),
       url("/fonts/roboto.ttf") format("ttf");
}


body {
  /* Тут уже используем приготовленный выше шрифт */
  font-family: "Roboto", "Arial", sans-serif;
}

Так же, в каждом браузере, рендер (формирование) текста с шрифтом разное, поэтому советую при назначении @font-face задавать свойство font-display. Оно позволяет задать, как конкретно будет отображаться текст при загрузке шрифта. У этого свойства есть несколько значений:

• block - пока не загрузился шрифт текст не будет отображать, но не больше 3-х секунд, иначе, если шрифт до сих пор не загружен, будет использоваться стандартный;
• swap - сначала отображается текст с стандартным шрифтом, после загружается подключаемый, и как тот будет готов - рендерится;
• fallback - похож на block, в течении 0.1 секунды текст не отображается, после, если шрифт до сих пор не загружен, текст отрендерится с стандартным шрифтом, подождёт 3 секунды, и если шрифт снова опоздает, то текст так и останется с стандартным шрифтом;
• optional - текст не отображается 0.1 секунды, если Ваш шрифт не был загружен - текст рендерится стандартным шрифтом.

@font-face {
    font-display: swap;
	/*css...*/

Так же советую почитать эту статью про оптимизацию шрифтов, будет полезно :)