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

**URL:** https://discourse.roots.io/t/scss-compiler-is-removing-quotes-from-font-family-solved/7558
**Category:** sage
**Tags:** gulp
**Created:** 2016-09-04T18:55:20Z
**Posts:** 2

## Post 1 by @sandrowuermli — 2016-09-04T18:55:21Z

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?

---

## Post 2 by @sandrowuermli — 2016-09-05T17:39:06Z

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](http://cssnano.co/optimisations/#minifyfontvalues)

> **[ben-eb/postcss-minify-font-values](https://github.com/ben-eb/postcss-minify-font-values)**
>
> postcss-minify-font-values - Minify font declarations with PostCSS

* * *

**Still not working?**

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