Ошибка в Google Fonts или я что-то не так понимаю?

Question

[Владимир Новицкий]

Здравствуйте.
Google Fonts в CSS API v2 стал по новому генерировать ссылки для подключения шрифтов.
Например, раньше было так:

@import url('https://fonts.googleapis.com/css?family=Arsenal:400,400i,700,700i&display=swap&subset=cyrillic-ext,latin-ext');

А теперь так:

@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&display=swap');

Последнее не работает. Ошибка, похоже, в точке с запятой после первого числа 400;, он раньше времени закрывает строку. Но, как это исправить и, чем заменить я не знаю.

Comments

[Lynn «Кофеман»]

Что значит не работает?
Шрифт загружается и показывается.

[Владимир Новицкий]

Lynn «Кофеман», написал об этом в ответе ниже. Код раскрашивается неправильно, значит что-то не так.

[Lynn «Кофеман»]

Владимир Новицкий, значит что-то не так в вашем редакторе кода. В CSS всё так.

[Ankhena]

Владимир Новицкий,

Но Notepad++ раскрашивает неправильно

Редактор Notepad++ не является адекватным редактором. Возможно, ему помогут обновления.

Вы можете вставить ваш код в валидатор и убедится в том, что ошибок в нем нет.

[Владимир Новицкий]

Ankhena, спасибо.

[Ankhena]

Владимир Новицкий, Приглядитесь к бесплатному VS Code или платному WebStorm (не так и дорого и с каждым годом дешевле).

Answer 1

[Алекс Глебов]

Экранировать обратным слешем или
@import url(#{"string"});

Comments

[Владимир Новицкий]

Если не сложно, можно на приведённом мною примере показать?

[Алекс Глебов]

Владимир Новицкий, экранирование

@import url('https://fonts.googleapis.com/css2?family=Arsenal\:ital,wght\@0,400\;0,700\;1,400\;1,700\&display=swap');

Мне ошибку воспроизвести не удалось. Так что проблема скорее всего в другом, опечатка и тд.

[Владимир Новицкий]

Алекс Глебов, ошибки вроде как и нет. Шрифт подгружается. Но Notepad++ раскрашивает неправильно:

И Ваш вариант тоже:

Получается, что все таки, что-то не так и меня это напрягает.

[Алекс Глебов]

Владимир Новицкий, так будет норм, url encoded

@import url('https://fonts.googleapis.com/css2?family=Arsenal%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700&display=swap');

[Алекс Глебов]

Ну и очень советую сменить редактор на современный
https://htmlacademy.ru/blog/boost/tools/editors-fo...

Answer 2

[Владимир Новицкий]

Спасибо всем. Выяснилось, что проблема не в Google, а в редакторе.