4

Probably a weird question and after your answers I might be ashamed for asking this.

I have a specific font embedded on my website (via @font-face) this font is used for a section that is only visible on wider resolutions (desktops). On Smartphones for example, this section is not visible (display:none).

The @font-face rule is not defined within a media-query but right at the beginning of my stylesheet.

I wonder now if it would be possible to avoid loading this embedded font-file if I'm viewing the site on a mobile device.

You know. The font-file has a view kb and I want my site to be as fast as possible. Since the font wouldn't even be needed on my mobile version I wonder if

1.) the font is even loaded at the moment? I have no idea how to test this on my iPhone. Since the section where it is used is set to display:none I don't get any feedback.

2.) If it is loaded (and I guess so) would it be possible to set this @font-face declaration inside a media-query with max-width : 640px (e.g. iPhone) and the files wouldn't be loaded in this case?

Any ideas on that matter?

thank you in advance.

Chris
  • 26,544
  • 5
  • 58
  • 71
matt
  • 42,713
  • 103
  • 264
  • 397
  • You're best off just testing it out and seeing if it works or not... try it out first with the section showing no matter what and the font being loaded no matter what, then move the @font-face declaration inside the media query, see if the font face is still being displayed, if not, it's not being loaded. – FluffyJack Sep 23 '12 at 09:20
  • Don't forget to post your results ;) – FluffyJack Sep 23 '12 at 09:20

2 Answers2

2

1) Images with display:none are loaded in some browsers and in some others not. So i guess it's the same for fonts.

2) There is a bug in FF 3.6, but they probably have fixed it nowadays. As far as i know, browsers supporting both media-queries and @ff should render it correctly.

CSS standards dictate that At-rules inside @media are invalid in CSS2.1, but according to this post you can load an external file with @import and a media-target declaration, i guess this way:

@import url("fonts.css") screen and (min-width:800px);

But you know, @import doesn't work that well. So i just wouldn't care about CSS2 and pretend to be writing CSS3 ;-)

This guy says that it's ok to just move @ff inside a media query.

I believe the best solution is to put it inside a min-width media query (don't forget to use the only keyword, which is intended to hide media queries from older browsers).

Using min-width is definitely more suitable than max-width for a progressive enhancement approach, and if your site is designed for mobile devices too it's probably what you want to use.

But as others said, testing is a must-do ... and sharing the results too ;-)

Giona
  • 20,734
  • 4
  • 56
  • 68
  • `@import` works very well in modern browsers, even with a media query. `@import` with a media type was already supported in CSS2 and CSS3 media queries merely extend media types. That said, nesting of at-rules has changed in CSS3 quite a bit, and now it's up to browser vendors to update their implementations. – BoltClock Sep 30 '12 at 18:02
  • @BoltClock probably i've outdated information.. i read to avoid `@import` [here](http://googledevelopers.blogspot.it/2012/03/css-fast-to-load-easy-to-maintain.html) and [here](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/) - oldish, but IE8 is still used by ~15% of users worldwide - and also on [SO](http://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import). Can't find any info about latest browsers and `@import` pro/cons. May you have some to share? – Giona Sep 30 '12 at 23:18
1

It seems to work. Didn't test it in older Versions of IE (I'm using modernizr, etc. for media-query support in older brosers) but it might work.

I'm defining the @font-face rule directly inside the mediaquery where it is needed. I tested it with all modern browsers. There is no request if the browser window is very small and the media-query isn't triggered. Once I resize the window to a larger with (where I need the font) it is loaded.

Just what I wanted.

matt
  • 42,713
  • 103
  • 264
  • 397