title: How do I combine @font-face and @media declarations?
body: <p>I'd like to build a common typography stylesheet with a very small number of selectors. As such, I'd far prefer to use <code>@media</code> sections for the various versions rather than create different files, each with only a few lines of content.</p>
  
  <p>I'd also like to add some <code>@font-face</code> declarations, but I'd prefer not to force mobile users to download the fonts given their limited bandwidth.</p>
  
  <p>Can I put the <code>@font-face</code> declaration within the <code>@media</code> block or do they have to both be top-level? If the latter, how can I tell the mobile browsers they don't need to bother downloading the font?</p>