Menu icon Foundation
Open Sans font import and slow load times

The sample file loads really slow.
I have 404 error
index.html:8

file://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700

it takes really long time to load this file. 14 seconds.

Am I only the one has this problem?

I have tried to download the lastest foundation 5. but still same. tried my home, office. all slow.

I have tried to find where this code is to remove. but I can't really find.

any tips?

Fontmilestone5.1

The sample file loads really slow.
I have 404 error
index.html:8

file://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700

it takes really long time to load this file. 14 seconds.

Am I only the one has this problem?

I have tried to download the lastest foundation 5. but still same. tried my home, office. all slow.

I have tried to find where this code is to remove. but I can't really find.

any tips?

Philip Hadviger about 6 years ago

I've added the following line to the bottom of my _settings.scss to fix this.:

$include-open-sans: false !default;

But it would be really nice if this fix could go into the stock install.

Steve Adams about 6 years ago

Look at line 24 in _global:

// Use Open Sans font
$include-open-sans: true !default;

Set that to false, and it will not include open-sans.

My guess is that on a local development config,

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

which is a protocol relative link (http: or https:) is defaulting to file: because you are not on a live server.

Hope this helps.

steven warwick about 6 years ago

Seems to be the case that if you download the stock foundation 5.0.2 onto a machine without an html server, and try to use directly into a browser, the stock download pauses until a timeout - something like 15 seconds due to lack of a "file://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" file.

this is fixed by adding html: in front of the //fonts in the .css files.

thinking that zurb might want to change the stock download to avoid this problem as newcomers will get a bad first impression.

I hope this is the correct approach to providing input here.

Pam Bifaro over 3 years ago

I am using Foundation 6 and the foundation.css file has this as the first line

@charset "UTF-8";

should I replace that with

//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700

 

Bjorn Blomqvist about 6 years ago

I have the same. It's currently unusable due to how slow it loads.

It's caused by:

line 287 in /bower_components/foundation/scss/foundation/components/_global.scss

If I edit out that line it loads faster. But I have no idea what that line actually does...

Bjorn Blomqvist about 6 years ago

I'm confused though.. am I supposed to be editing _global? I thought those files get over-written when running a update command?

Steve Adams about 6 years ago

You could try adding that line into _settings to see if it works.

James Craine about 6 years ago

I wonder why Foundation included Open Sans at all. I would have expected a basic font like Helvetica Neue and to overwrite that with my own font of choice.

Plus the Open Sans font makes all small text really thin and ugly. Especially on the F5 Docs. I much preferred the Foundation 4 docs because of Helvetica.

Mihai Stroe about 6 years ago

@Philip

+1 that worked for me.

Michel Vinke almost 6 years ago

This almost made me switch to bootstrap
I downloaded foundation and got frustrated with the very slow loading index.html example page

putting :html in front seems to solve the speed problem :)

Best regards,
Michel Vinke
www.michelwebdesign.nl

Rafi Benkual almost 6 years ago

You can remove it for now. We are dumping it for the next point release. If you're interested in this kind of stuff, you can follow it here:

https://github.com/zurb/foundation/issues?milestone=4&page=1&state=open

Jake Braden almost 6 years ago

Hello! I have been having problem as well. However i believe that i have found a solution. Open your foundation.css file in a text editor. The top line of code should be

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

Copy and paste the link part of the code:

//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700

Copy and past the text on the page in to the first line of the foundation.css file.

Then, delete the
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
and save your file.

The page should refresh much faster. If you have any questions, simply reply back(:

Mihai Stroe almost 6 years ago

@Rafi

That's a good move, looking forward to it.