I had this idea of using @font-face within media query for just for large screens to load up whatever fancy fonts I have and then use a regular, browser default font for smaller screens.
The @font-face would only load up for larger screens and not for the smaller screens where the connection is usually slow. So it won't load the unnecessary font in smaller screens.
I have two queries with this.
Is it possible to use @font-face within a media query to selectively load the font? and would it actually work the way I described here?
I don't mean to answer your question with a question - but have you tried it? ;-)
If you put a prototype together and use the developer tools (chrome, safari, whatever) you'll be able to see what assets are loaded etc.
Brandon
Frontend Developer
Although it's not used as frequently, media queries go in any direction. You can use a media query to specify greater than mobile size and have it load the font.
@media only screen and (min-width : 720px) { @font-face... }If you're unsure if this works, you can look at the net tab in developer tools. Open the developer tools network tab, resize the window to be small, load the page and then make the window larger. You should see the font-file requested in the network tab.
You may want to look into webfontloader if you feel that method isn't reliable enough. https://github.com/typekit/webfontloader