Google шрифты работают на реальном сервере, но не на localhost

Question

Мои шрифты Google хорошо отображаются на моем веб-сайте, но при работе на localhost они отображаются иначе. Более квадратный / стандартный, но не такой, как стандартный шрифт.

Как они показывают на 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');