Key media queries in the font family

Question

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?

Answer 1

If you look at foundation.js on Github , it looks like they just use the font-family value to pass media requests to Javascript, it seems to keep them consistent if people change the default values ​​in SCSS. In CSS, it will not match the correct font name and will simply be safely ignored.