Рендеринг шрифтов на телефоне различен, а как проверить на телефоне?

Question

У меня проблемы со шрифтами на моем сайте.Я использую:

font-family: 'Fredoka One', cursive;

И он отлично работает для ПК и настольных ПК, но на телефоне я получаю небольшие курсивные шрифты.Я пытался использовать медиа-запрос, но он не работает

     /* Phone fonts*/
        /* iPad [portrait + landscape] */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)     {
    body {
    font-weight:800!important;
        font-family: 'Fredoka One', cursive!important;
font-size:20px;
}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    body {
font-weight:800!important;
font-size:20px;
        font-family: 'Fredoka One', cursive!important;
}
}

Он не использует ни один из этих стилей CSS.Когда я проверяю браузер Chrome на iphone, он работает нормально, но когда я на самом деле использую свой телефон, он отличается

Answer 1

Проблема в том, что на вашем телефоне не установлен шрифт Fredoka One.

Поместите следующую строку в заголовок вашей страницы, чтобы сделать ее доступной:

<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">