谷歌字体显示在桌面但不在移动设备上（在 Android 和 iOS 上测试）答案

【问题标题】：Google fonts displayed on desktop but not on mobile (Tested on Android an iOS)谷歌字体显示在桌面但不在移动设备上（在 Android 和 iOS 上测试）
【发布时间】：2018-05-31 22:14:44
【问题描述】：

我正在为客户重新设计一个网站（使用 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，但没有任何改变。

有什么想法或建议吗？

提前致谢

【问题讨论】：

标签： css modx google-fonts

【解决方案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;

【讨论】：