Comments are breaking the CSS format.

I'm trying to import some fonts on my CSS through @font-face but I'm having a strange behaviour when formatting the CSS code. By the way, this is an external stylesheet.

This is the ruleset I'm trying to use, it's copied and pasted from google webfonts helper:

/* croissant-one-regular - latin */
@font-face {
font-family: 'Croissant One';
font-style: normal;
font-weight: 400;
src: url('../font/croissant-one-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../font/croissant-one-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/croissant-one-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/croissant-one-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../font/croissant-one-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/croissant-one-v18-latin-regular.svg#CroissantOne') format('svg'); /* Legacy iOS */

As you can see, there is a comment at the end of each URL, when I format, which I set to be done when saving, pycharm it will put all the URLs in a single line instead of keeping it as they are one per line, but if I remove the comments or swap the comma for a semicolon, then they will keep a line each. 

Does anyone know why it's happening? And I'd like to keep the comments but I'm not totally sure if swapping the comma for semicolon will then create other issues, I'm quite new and still learning but I couldn't find anything regarding this matter.




Please sign in to leave a comment.