Menu icon Foundation
Where does google font import come from?

I'm testing foundation 5 and doing it the same way I was using foundation 4: with sass. One thing is disturbing me a bit cause I'm not finding the scss file.

At the top of my app.css file, there's a google font import

@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
            

         

At the top of main scss file (app.scss) located in "project_name/scss/app.scss" there are two imports: "settings" and "foundation". To my surprise _settings.scss was empty at the main scss folder defined on compass's config.rb. Just after I see that add_import_path. But even on those files I couldn't find any reference to google font import.

Where does that google font import come from?

Sasssettingscompassapp css

I'm testing foundation 5 and doing it the same way I was using foundation 4: with sass. One thing is disturbing me a bit cause I'm not finding the scss file.

At the top of my app.css file, there's a google font import

@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
            

         

At the top of main scss file (app.scss) located in "project_name/scss/app.scss" there are two imports: "settings" and "foundation". To my surprise _settings.scss was empty at the main scss folder defined on compass's config.rb. Just after I see that add_import_path. But even on those files I couldn't find any reference to google font import.

Where does that google font import come from?


Rafi Benkual gave the most helpful answer for this post
Rafi Benkual over 5 years ago

To target specific text.

I did it this way:
In app.scss
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);

then in _settings.scss
uncomment the font you want targeted and insert google font
$header-font-family: 'Shadows Into Light Two', cursive;

This post has been closed. No new replies can be added.

José Eduardo Biasioli over 5 years ago

I have the same "issue".

It just takes forever for the browser to load the page everytime i change something in the _settings.scss file.

I'm assuming that's the cause, since I'm running the test locally (outsite any webserver).

Shawn Jones over 5 years ago

I see it in bower_components > foundation > scss > foundation > components > _global.scss. I am using Codekit and it throws an error when I compile. I wonder how to properly override it? I put it an @import in my _mysite.scss file and it showed both Google font imports.

Renan Aguiar over 5 years ago

Shawn Jones, you're right. This import is located in _global.scss, thanks. According to an overwrite, you can set it to FALSE on line 24 or use another font changing the line 281.
```SASS
line 24 : $include-open-sans: true !default;
line 281 : @import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

But who is importing this file? The foundation.scss in bower_components > foundation > scss import a bunch of things but no _global.scss there, I'm going see later. Foundation 4 was a bit straightforward, but time will make Foundation 5 better (I hope).

Marek Simko over 5 years ago

i had to add http: because it was not working for me...

import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

Stakoov over 5 years ago

Renan you have in every component scss file @import "global" statement - this font came from there. just set $include-open-sans to false it's not big deal ;)

Shawn Jones over 5 years ago

Here is what I ended up doing. In the _settings.scss file, I changed $include-open-sans (line 29) to false. Then I added the @import line for the Google font. That seemed to compile correctly and was pretty easy.

Renan Aguiar over 5 years ago

Stakoov, I think I need to see a doctor.....because I don't know yet who is importing the "global" hahaha ;), but its ok. It's just because I think this kind of main settings (include-open-sans) should be in a easy location like: project > scss > _settings.scss and not project > bower_components > foundation > scss > foundation > components > _global.scss like it is there. I'm making a storm for such a tiny thing haha. I will just shut up. Thanks guys.

Rafi Benkual over 5 years ago

To target specific text.

I did it this way:
In app.scss
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);

then in _settings.scss
uncomment the font you want targeted and insert google font
$header-font-family: 'Shadows Into Light Two', cursive;