Google字体在实时服务器上运行，但在localhost

Question

我的谷歌字体在我的实时网站上显示正常，但在本地主机上的制作中，它们的显示方式不同。更多四四方方/标准，但与标准字体不一样。

他们如何在localhost上显示：

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

这是我的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');