Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как подключать внешние шрифты при сжатии CSS?

Как подключать внешние шрифты при сжатии CSS?


     06.03.2019    Все вопросы » Стили (CSS)    1760

вопрос
Приветствую!

Для сжатия подключаемых CSS файлов используется строка:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/engine.css,{THEME}/css/styles.css" />


но в styles.css в самом начале подключены шрифты от Гугла:
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,700&subset=cyrillic');


Если используется подключение css без сжатия, внешние шрифты отображаются на сайте корректно, но если css файл подключать через сжатие, то шрифты не отображаются.

Как корректно подключать внешние шрифты при одновременном сжатие css?

Спасибо.

Ответа пока нет


2 комментария

akella
Юзер

akella - 8 марта 2019 04:37 -

<link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,700&subset=cyrillic" rel="stylesheet"> 

или попробовать без импорта добавить в css всё отсюда https://fonts.googleapis.com/css?family=Exo+2:300,400,700&subset=cyrillic

finik
Юзер

finik - 8 марта 2019 09:48 -

Я поступил иначе. Здесь выбрал параметры шрифта, скачал шрифт и добавил на сайт и подключил в CSS

/* exo-2-300 - latin_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/exo-2-v5-latin_cyrillic-300.eot'); /* IE9 Compat Modes */
  src: local('Exo 2 Light'), local('Exo2-Light'),
       url('../fonts/exo-2-v5-latin_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v5-latin_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v5-latin_cyrillic-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v5-latin_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v5-latin_cyrillic-300.svg#Exo2') format('svg'); /* Legacy iOS */
}
/* exo-2-regular - latin_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/exo-2-v5-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
  src: local('Exo 2'), local('Exo2-Regular'),
       url('../fonts/exo-2-v5-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v5-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v5-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v5-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v5-latin_cyrillic-regular.svg#Exo2') format('svg'); /* Legacy iOS */
}
/* exo-2-700 - latin_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/exo-2-v5-latin_cyrillic-700.eot'); /* IE9 Compat Modes */
  src: local('Exo 2 Bold'), local('Exo2-Bold'),
       url('../fonts/exo-2-v5-latin_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v5-latin_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v5-latin_cyrillic-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v5-latin_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v5-latin_cyrillic-700.svg#Exo2') format('svg'); /* Legacy iOS */
}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх