Menu
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?
389
There are two types of font family names: family-name - The name of a font-family, like "times", "courier", "arial", etc. generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
The font-family property holds several font names to provide a "fallback" system. The browser tries each font family in the order that they are listed; if the browser does not support the first font, it tries the next font, and so on, down the list.
A font stack is a list of fonts in the CSS font-family declaration. The fonts are listed in order of preference that you would like them to appear in case of a problem, such as a font not loading.
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.
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
