Почему на iphone не подключаются css import?

Question

[Максим Иванов]

Если использовать

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

То все работает, но я хотел вынести в один файл css все

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(http://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

// ...

Однако, именно на iphone 4 у меня не работает это и иконки materialize не отображаются, почему?

Answer 1

[Александр]

caniuse.com/#search=woff2

Answer 2

[iBird Rose]

не достаточно грузить только woff2.
нужно все. eot, woff2, woff, ttf, svg

Comments

[Максим Иванов]

Но когда работал link, все работало на iphone даже
Или google динамически сервером создает файл с font-face правилами и шрифтами под нужный браузер и ОС?

[SagePtr]

Максим Иванов: да, гугл по юзер-агенту браузера определяет его возможности и подсовует нужный формат.

Answer 3

[dom1n1k]

Дело в том, что Google Fonts отдает различный CSS в зависимости от браузера клиента.
Поэтому, если хочется сделать все инлайново - недостаточно его просто скопипастить.
Нужно написать свой кроссбраузерный код, аккуратно воткнув в него все необходимые гуглоссылки.
Лично по мне - овчинка не стоит выделки.