Html 在mobile Safari中显示不同的网站字体

我在iPhone6上测试我的网站时，注意到我的一种字体看起来明显不同，基本上是一种完全不同的字体。在搜索和调整之后，我不知道发生了什么

这是字体的CSS：

h1 {
  font-family: 'Great Vibes', cursive;
  color: black;
  font-size: 52px;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

在我实际的CSS中，我这样链接它，但在JSFIDLE中显然没有必要这样做：

这里有一把小提琴演示了这个问题：

这就是它在桌面（Safari、Chrome和Firefox）上的外观：

这就是它在手机上的外观（Safari-iPhone6）：

---

字体系列：'greatvibes'，草书定义要用于该元素的字体。但是，如果查看你的页面的人的系统中没有“Great Vibes”字体，则将替换为“cursive”字体。没有看到你的链接参考，但是在查看你的小提琴时，我将其视为Comic Sans，既不是很棒的Vibes，也不是任何其他草书字体。但是当我添加
http://fonts.googleapis.com/css?family=Great+Vibes
作为参考，它不应该下载字体吗？基于谷歌字体，你的参考链接应该是这样->
你在
https
中缺少了“s”。我确实注意到了这一点，并在小提琴中修复了它（并更新了链接），但它似乎仍然不起作用。不过我在问题中解决了它。