网站字体在移动Safari中显示不同

Question

我在我的iPhone 6上测试我的网站，并注意到我的一个字体看起来有很大不同，基本上是完全不同的字体。在搜索和调整后，我不知道发生了什么。

这是字体的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中，我这样链接它，但显然在jsfiddle中没有必要：<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

以下是展示此问题的小提琴： https://jsfiddle.net/9uppfqqx/11/

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

这是它在移动设备上的外观（Safari - iPhone 6）：