Home/ Questions/Q 8603449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:19:31+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0