Google Fonts на мобильных и настольных ПК

Question

Я использую шрифт Merriweather для своего веб-приложения, импортировав его, как показано ниже.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300i">

Это прекрасно работает в браузерах настольных компьютеров, но в мобильных устройствах оно использует шрифт по умолчанию. Если я заменю строку для импорта 300 вместо 300i, все будет работать нормально.

Кто-нибудь знает, как мне по-прежнему использовать шрифт 300i на настольных компьютерах и вернуться к 300 на мобильных устройствах?

Answer 1

Не смотря на любые CSS, которые вы, возможно, реализовали, самый простой способ изменить фронты между сетью и мобильностью - это использовать медиазапросы.

Поскольку вы хотите использовать как 300, так и 300i, импортируйте

  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i"    rel="stylesheet">

Установите обычный текст по умолчанию на

  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300;

Для мобильных устройств используйте медиазапросы:

@media all and (max-width: 991px) or (max-width: 768px) or (max-width: 480px) {
* these are the three popular mobile queries *
}

Внутри медиа-запроса вы можете установить текст:

  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;

Answer 2

Вам нужно будет импортировать оба шрифта в основную таблицу стилей.

@font-face {
    font-family: Merriweather:300i;
    src: url(https://fonts.googleapis.com/css?family=Merriweather:300i);
}

@font-face {
    font-family: Merriweather:300;
    src: url(https://fonts.googleapis.com/css?family=Merriweather:300i);
}

(Возможно, вам потребуется указать фактическое местоположение файла .woff в свойстве src:.)

Затем используйте специальные медиазапросы для мобильных и настольных компьютеров

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  * {
      font-family: Merriweather:300i
   }

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {     

  * {
      font-family: Merriweather:300
   }

}