Comment importer Google Web Font dans un fichier CSS?


258

Je travaille avec un CMS auquel je n'ai accès qu'au fichier CSS. Donc, je ne peux rien inclure dans le TÊTE du document. Je me demandais s'il y avait un moyen d'importer la police Web à partir du fichier CSS?

Réponses:


382

Utilisez la @importméthode:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Évidemment, "Open Sans" ( Open+Sans) est la police qui est importée. Alors remplacez-le par le vôtre. Si le nom de la police comporte plusieurs mots, codez-le par URL en ajoutant un +signe entre chaque mot, comme je l'ai fait.

Assurez-vous de placer le @importtout en haut de votre CSS, avant toute règle.

Google Fonts peut générer automatiquement la @importdirective pour vous. Une fois que vous avez choisi une police, cliquez sur l' (+)icône à côté d'elle. Dans le coin inférieur gauche, un conteneur intitulé "1 famille sélectionnée" apparaît. Cliquez dessus et il s'agrandira. Utilisez l'onglet "Personnaliser" pour sélectionner les options, puis revenez à "Intégrer" et cliquez sur "@import" sous "Intégrer la police". Copiez le CSS entre les <style>balises dans votre feuille de style.


25
Vous devez éviter d'utiliser @import car cela retardera le chargement de la ressource incluse jusqu'à ce que le fichier soit récupéré. Voir la réponse détaillée ici: stackoverflow.com/a/12380004/925560
Renato Carvalho

5
Déplacer la ligne @import vers le haut a résolu ma vie! Je vous remercie!
joalcego

2
Pourquoi Google dit-il cela? Google Insides prétend ne pas faire @import. developers.google.com/speed/pagespeed/insights ?
danger89

2
Ceci est une réponse dépassée. @importse charge séquentiellement et est préférable d'éviter: varvy.com/pagespeed/avoid-css-import.html La façon préférée (et par défaut) de charger les polices Google de nos jours est d'utiliser <link>.
Chuck Le Butt

2
Vous le regretterez lorsque vous arriverez au référencement et commencerez à optimiser la vitesse de votre page avec les informations de Google PageSpeed. Utilisez <link>et optimisez sa livraison à la place.
Accountant م

66
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Mieux vaut ne pas utiliser @import. Utilisez simplement l'élément de lien, comme indiqué ci-dessus, dans la tête de votre mise en page.


19
Pouvez-vous expliquer pourquoi "Mieux vaut ne pas utiliser"? J'ai cherché cette question car je voudrais savoir quelle méthode est considérée comme la meilleure.
Adam Hollow

2
J'ai eu un problème avec Internet Explorer avec @import. Parfois, il ne le lit tout simplement pas.
Burk

6
Il a spécifiquement déclaré qu'il ne pouvait pas utiliser la balise <link> dans son en-tête.
Nathan

26
+1 pour l'utilisation de «lien», car il ne bloquera pas le chargement parallèle d'autres fichiers externes. 'import' bloquera le chargement parallèle d'autres fichiers externes.
Jahmic

2
En utilisant @import, vous pouvez intégrer la police au style CSS au lieu du balisage HTML, qui semble sémantique plus correct, et vous pouvez échanger les polices de votre site via CSS. Mais comme Chuck l'a commenté, il semble que vous preniez un léger coup de vitesse pour cela. Peut-être chronométrer les temps de chargement, puis décider au cas par cas. Notez que pour les SVG @import est le seul moyen qui fonctionne AFAIK.
Mentalist

38

Téléchargez la police ttf / autres fichiers de format, puis ajoutez simplement cet exemple de code CSS:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}


37

Ajoutez le code ci-dessous dans votre fichier CSS pour importer les polices Web Google.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Remplacez la valeur du paramètre Open + Sans par votre nom de police.

Votre fichier CSS devrait ressembler à:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

13
  1. Accédez simplement à https://fonts.google.com/
  2. Ajoutez une police en cliquant sur +
  3. Accédez à la police sélectionnée> Incorporer> @IMPORT> copiez l'URL et collez-le dans votre fichier .css au-dessus de la balise body.
  4. C'est fait.

9

Utilisez la balise @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

8

En plus des réponses ci-dessus, considérez également ce site; https://google-webfonts-helper.herokuapp.com/fonts

Avantage:

  • vous permet d'héberger ces polices google pour de meilleurs temps de réponse

  • choisissez votre (vos) police (s)

  • choisissez votre jeu de caractères
  • choisissez vos styles de police / poids
  • choisissez votre navigateur cible
  • et vous obtenez les extraits CSS (ajoutez à votre feuille de style CSS) plus un zip des fichiers de police à inclure dans votre projet

Par exemple your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

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

1
Cela vous permet également de charger d' font-weight: 400abord, puis de charger le reste de la police en utilisant le même code sans arguments. Cela permet un affichage plus rapide et, si vous n'avez pas besoin de la police entière, des fichiers CSS plus petits.
moto


3
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Pour choisir la police, vous pouvez visiter le lien: https://fonts.google.com

Écrivez le nom de la police de votre choix sur le site Web à l'exclusion des crochets.

Par exemple, vous avez choisi Lobster comme police de votre choix,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Ensuite, vous pouvez l'utiliser normalement comme famille de polices dans l'ensemble de votre fichier HTML / CSS.

Par exemple

<h2 style="Lobster">Please Like This Answer</h2>


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.