0
votes

Propriété CSS font-weight affichant uniquement le poids normal

J'ai importé des polices Montserrat (400,700 et 900) et Ubuntu (400) à partir de polices google mais il semble que seuls Montserrat 400 et Ubuntu 400 fonctionnent, je ne peux pas utiliser Montserrat 700 ni Montserrat 900. J'apprécierais si n'importe qui peut m'aider car je suis coincé là-dessus depuis un certain temps maintenant. Merci!! Voici mon code:

<h1>Title</h1>
<h3>Title</h3>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">

body{
font-family: 'Montserrat', sans-serif;
}

h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}

h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

html css fonts

3 commentaires

Cela semble bien fonctionner pour moi: jsfiddle.net/f3qx8nkb Quel navigateur utilisez-vous?

Idem ici: jsfiddle.net/wfp168se/4 (supprimé toutes les propriétés non pondérées pour voir le pur effet)

@ttoshiro J'utilise Chrome mais les Montserrat 700 et 900 ne fonctionneront pas: /. J'utilise également Bootstrap mais je fais les déclarations html de bootstrap avant la déclaration des polices google au cas où cela n'écraserait rien mais ne fonctionnerait toujours pas :(

3 Réponses :

1
votes

Est-ce possible que vous liez la police dans votre fichier css? Vous devriez le déplacer vers votre html.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

body{
font-family: 'Montserrat', sans-serif;
}

.w-900{
font-weight: 900;
}

.w-700{
font-weight: 700;
}

JSFiddle

Alternativement, vous pouvez utiliser @ font-face

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<p class="w-900">Hello 900</p>
<p class="w-700">Hello 700</p>

W3 Schools

Comment importer des polices

0 commentaires

1
votes

h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}

h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

2 commentaires

Cette partie est déjà dans mon fichier HTML et j'ai le même code que vous mais mon Chrome l'affiche différemment pour Montserrat 700 et 900

Vous avez probablement fait une erreur quelque part, je suggère de réécrire entièrement certaines parties et d'essayer également font-face si cela ne fonctionne pas pour une raison quelconque. Testez-le également dans d'autres navigateurs ou peut-être même sur un autre ordinateur si vous y avez accès.

0
votes

Je comprends qu'il s'agit d'un bogue de Chrome, ce qui est intéressant car j'utilise une version de Chromium et cela fonctionne très bien. Je recommanderais d'utiliser CSS interne (plutôt que des feuilles de style externes) sous une balise dans votre section (où vous devriez également faire référence au lien à la police), et en y ajoutant le CSS attribué à * , comme indiqué ci-dessous:

<h1>Title</h1>
<h3>Title</h3>

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.5;
}

h3 {
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

Alternativement, il existe également la méthode @import , que vous devriez trouver grisée comme option de droite dans la section Intégrer du lien Google Fonts . Cela devrait cependant être votre option secondaire, car, en tant que @igriorik remarques ici , ces règles reportent le chargement de la ressource incluse jusqu'à ce que le fichier soit récupéré, ce qui pourrait entraîner des polices cassées sur certaines plates-formes.

Pour ce faire, cependant, vous devez ajouter @ importez les règles sous une balise , et référencez-la dans l'élément souhaité. Dans votre cas (avec la police Montserrat):

<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
</head>

<body>
  <h1>Title</h1>
  <h3>Title</h3>
</body>

* {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.5;
}

h3 {
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

Faites-moi savoir si cela ne fonctionne pas!

0 commentaires