谷歌字体在实时服务器上工作，但不在本地主机上

Question

我的 google 字体在我的实时网站上显示良好，但在本地主机上的生产中，它们显示不同。更四四方方/标准，但与标准字体不同。

它们在本地主机上的显示方式：

它们在实时服务器上的显示方式（这是我想要的）：

这是我的 CSS：

@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Caveat+Brush');

body{ 
  font-family: "Droid Sans", sans-serif; //'projects'
}
#title {
  font-family: 'Caveat Brush', cursive; //'Junior Web Developer'
}

我用的是gulp和browser-sync，但是直接从浏览器打开html文件也有同样的问题

Answer 1

将@import 代码移动到 CSS 文件的最顶部，高于其他所有内容。

@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Caveat+Brush');