Как подключить гугл фонтс в sass?

Question

[Олег]

Для CSS гугл выдает такую строку:
Dmitrijs Balcers url('https://fonts.googleapis.com/css?family=Open+Sans+...,700&subset=cyrillic');

Для SASS такая строчка не работает:
Dmitrijs Balcers 'https://fonts.googleapis.com/css?family=Open+Sans+...,700&subset=cyrillic'

Подскажите пожалуйста, как правильно?

Answer 1

[Андрей Б.]

Вы код показывайте, а не ссылки на шрифт.
dl1.joxi.net/drive/2016/11/17/0000/2132/47188/88/a...
codepen.io/anon/pen/aBBOvY

Comments

[Олег]

есть песочница для sass с бесплатным аккаунтом? codepen платный.

[Сергей delphinpro]

Олег: codepen бесплатный. пользуйтесь. без платных функций вполне можно жить.

[Сергей delphinpro]

jsfiddle.net есть еще

[Олег]

Сергей: его пользую. но там sass нет или я не нашел(((

[Сергей delphinpro]

Олег:

[Андрей Б.]

Олег dl2.joxi.net/drive/2016/11/17/0000/2132/47188/88/7...

Answer 2

[sergey]

Странный вопрос: какая собственно разница, подключите его строчкой которую вы получили с google fonts в header вашего проекта и не изобретайте велосипед.

<link href="https://fonts.googleapis.com/css?family=Lato:100i,300,400,400i,700,900" rel="stylesheet">

Comments

[Олег]

Разница большая в скорости загрузки. Гугл пейдж спид сильно снизит баллы за скорость при таком варианте подключения в шапке. получается 75 из 100 баллов с этой строкой. без неё выдаёт 100 из 100;)

[sergey]

Олег: подключаю всегда так: и ни разу google page speed не снижал балы по скорости, возможно что-то не так делаете...

[Олег]

SM: смотря сколько баллов до подключения было))

[Сергей delphinpro]

Олег: а import внутри css блокирует обработку стилей до загрузки шрифта...

[sergey]

Олег: да нормально с балами, у меня сборка gulp на build выдает 91-93, считаю что подключение шрифтов в header оптимально.

[Олег]

Сергей: как вариант можно в конец файла импорт написать.

на данный момент я вставил Гугл-код в конец хтмл перед закрывающим тегом боди. норм работает.

в sass запихнуть, чтобы работало пока не получилось(( позже попробую разобраться

[sergey]

Олег: "на данный момент я вставил Гугл-код в конец хтмл перед закрывающим тегом боди. норм работает. " - вы это серьезно? что за велосипед вы придумали

[Олег]

SM: этот вариант выдаёт 100 из 100 в Гугл Пейдж Спид)) это мне и требовалось))