SCSS Compiler is removing quotes from font-family (SOLVED)

sage
1

Hey Guys.

I have a really strange thing that makes me confusing.
So i’ve added some Google Fonts like this in my _fonts.scss and include it to my main.scss:

/* greek */
@font-face {
	font-family:   'Noto Serif';
	font-style:    normal;
	font-weight:   400;
	src:           local('Noto Serif'), local('NotoSerif'), url(https://fonts.gstatic.com/s/notoserif/v4/1_daFS3X6gkNOcmGmHl7UgsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

I didn’t use the normal Google Fonts @import because it didn’t work for me.
All Fonts are correctly loaded to my project, but if i do something like this:

h1 {
	font-family: 'Noto Serif', serif;
}

it compiles like this to my main.css file:

h1 {
	font-family: Noto Serif, serif;
}

The Quotes are removed and i’ve no idea why. This works on some Browsers, but not in Safari 9 as example.
i know i can rename the font-family name in @font-face but that’s not a solution for me.
I’ve tried some things like this:

h1 {
	#{"font-family: 'Noto Serif', serif;"}
}

But this removes also the quotes.

Just for fun i’ve misspelled font-family to font-families

h1 {
	font-families: 'Noto Serif', serif;
}

and this is compiling correctly to this:

h1 {
	font-families: 'Noto Serif', serif;
}

Did anybody know where the problem is?

2

i solved this problem by myself.

In your gulpfile.js edit this line:

.pipe( cssNano, {
	safe: true
} )

to this:

.pipe( cssNano, {
	safe: true,
	minifyFontValues: { removeQuotes: false }
} )

Want to read more about this?
Here you go:
http://cssnano.co/optimisations/#minifyfontvalues

Still not working?

do not @include Google Fonts (or other fonts) via .scss. Use the wp_enqueue_style() Function.

3 Likes