Foundation media queries in font-family
css, zurb-foundation
Solution
If you look at foundation.js on Github it looks like they are just using the font-family value to pass the media queries to Javascript, presumably to keep them consistent if people change the defaults in SCSS. In the CSS it's not going to match a valid font name and will just be safely ignored.
Problem
In Foundation, the main CSS file begins with this ``` meta.foundation-mq-small { font-family: "/only screen and (max-width: 40em)/"; width: 0em; } meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.063em) and (max-width:64em)/"; width: 40.063em; } meta.foundation-mq-large { font-family: "/only screen and (min-width:64.063em)/"; width: 64.063em; } meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.063em)/"; width: 90.063em; } meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.063em)/"; width: 120.063em; } ``` Why are there media queries in the font-family property?