Перейти к содержанию

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


Рекомендуемые сообщения

Воспользуйтесь расширенным поиском по форуму opencart Воспользоваться поиском

Ознакомьтесь с руководством по использованию opencart Перейти к Документации

Расширьте возможности интернет-магазина дополнениями Подобрать Модуль

Выберите исполнителя для вашего технического задания Выбрать Исполнителя

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

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

Добрый день.

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

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

 

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

Ссылка на комментарий
Поделиться на другие сайты

Если использовать только один тип шрифта, сделать 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;

 

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

 

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

 

Ссылка на комментарий
Поделиться на другие сайты

В 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...*/

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

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...