1485 sujets

Web Mobile et responsive web design

[Résolu] Ne pas charger une police en mobile

Bonjour.

Il y a-t-il une solution pour que seule la version desktop d’un site charge une police Google ?

J’ai essayé avec des media-querries :
<link media="screen and (min-width: 1024px)" href="http://fonts.googleapis.com/css?family=maPolice" rel="stylesheet" type="text/css">

mais cela ne semble pas fonctionner…
Modifié par Derwoed (09 Mar 2017 - 14:47)
Bonjour.

Je ne suis pas une spécialiste mais peut-être que
loadCss pourrait être une piste intéressante.

Il permettrait de charger du CSS de manière asynchrone et de ce fait, vous pourriez avoir un meilleur contrôle...
Smiley smile
Modifié par Zelena (09 Mar 2017 - 15:35)
Administrateur
Hello,

En fait, un fichier de police n'est chargé que lorsqu'il est explicitement demandé (appliqué sur un élément du DOM).

Du coup, il suffit de faire ainsi : commencer par charger la police Google chez toi pour éviter les soucis de "third parties", puis :


@font-face {
  font-family: "kiwi";
  src: … ;
}

body {
  font-family: arial, serif;
}

@media (min-width: 481px) {
  body {
    font-family: "kiwi", serif;
  }
}


De cette manière, le fichier ne sera ni appliqué ni chargé sur un écran de moins de 481 pixels.

EDIT : ceci dit, les scripts permettant de gérer finement le chargement asynchrone ne sont pas une mauvaise idée, mais là pour le coup j'éviterais une couche JS pour "si peu".
Modifié par Raphael (09 Mar 2017 - 16:37)
Meilleure solution
Merci tout le monde.

Par rapport à mon cas, la solution de Raphaël est la plus efficace. D’ailleurs je l’avais mise en place, mais à cause de mon cache, j’avais l’impression qu’il chargeait quand même la police inutilement en mode smartphone. Je n’avais en fait pas de problème ! Smiley cligne

Par contre cela m’a permis de découvrir loadCss et webfontloader…
Sujet clos
Aller à