Alex Limenko answer is right. I'm having this problem too. I was using the foundation 5.0.x (don't remember exactly which version, but certainly was an early 5). This morning I started to update my JS files to 5.2.1.

All my JS stopped working and no warning at all. After a few hours searching for a solution I decided to update the css files as well. Now it works.

Note: I'm working with foundation gem (compass).

I had this problem once when building my custom css using compass (foundation gem). The problem was that I forgot to add the css part which include this:

meta.foundation-data-attribute-namespace {
  font-family: false; }

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.

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).

The difference is based on display size and priorities. For example, suppose you want to develop a website for smartphones, tablets and pcs (large displays). You can start just adding small-x classes to your grid. Medium (tablets) and Large (pc) displays will inherit the Small (smartphone) css layout. But you can create different layouts based on different displays. Like this:

<div class="row">
  <div class="columns small-12 large-6">Content A</div>
  <div class="columns small-12 large-6">Content B</div>
</div>

This leads to 2 different layouts: Large and Small. On small displays each content will fill an entire row, they will stack. But you don't want this behavior on large displays, so you can add large-x classes that will override small-x classes. In large displays each content will stay side by side, filling only one row.

Large > Medium > Small. That is the priority chain based on display. And this priority chain is accomplished by media queries. This is one of the reasons foundation works great in IE9+. IE8 does not support IE8.

At the main css file (foundation.css), you notice that .small-x, .medium-x and .large-x classes all have the same width percentage. The difference lies on which layout will want for each display size and using these classes accordingly.