My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Selectively loading fonts within media queries?

Selectively loading fonts within media queries?

Sharon Chaisky's photo
Sharon Chaisky
·Mar 29, 2016

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?