Google字体显示在桌面上但不在手机上（在Android和iOS上测试）

Question

我为客户重新设计了一个网站（使用MODX CMS）here，我使用了2种不同的Google字体。

我可以在桌面上显示它们，但不能在移动设备上显示。

我尝试使用适用于Android的Chrome和适用于iOS的Safari。

在桌面设备（Mac和Windows）上，它可以正常工作（使用不同的浏览器）。

我把他们联系错了吗？

这里我在CSS中有什么：

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,500,500i,600,600i,700,700i');

@import url('https://fonts.googleapis.com/css?family=Kanit:400,400i,500,500i,600,700,800');

body {
font-family: 'Zilla Slab', serif !important;
}

h1 {
font-family: 'Kanit', sans-serif;
text-transform: uppercase;
color: #e63f2f;
font-size: 20px;
}

h2 {
font-family: 'Kanit', sans-serif;
text-transform: uppercase;
color: #e63f2f;
}

我尝试的也是停用MinifyX模块但没有任何改变。

有任何想法或建议吗？

提前致谢

Answer 1

要在 CSS 中链接以下两种字体，请执行以下操作：

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');

font-family: 'Zilla Slab', serif;


@import url('https://fonts.googleapis.com/css?family=Kanit');

font-family: 'Kanit', sans-serif;

或 HTML ：

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

font-family: 'Zilla Slab', serif;


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

font-family: 'Kanit', sans-serif;