Réponses:
Utilisez la @import
mé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 @import
tout en haut de votre CSS, avant toute règle.
Google Fonts peut générer automatiquement la @import
directive 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.
@import
se 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>
.
<link>
et optimisez sa livraison à la place.
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&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.
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;
}
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;
}
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)
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;
}
font-weight: 400
abord, 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.
Vous pouvez également utiliser @ font-face pour créer un lien vers les URL. http://www.css3.info/preview/web-fonts-with-font-face/
Le CMS prend-il en charge les iframes? Vous pourriez également être en mesure de jeter un iframe en haut de votre contenu. Ce serait probablement plus lent - mieux vaut l'inclure dans votre CSS.
<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>
Jus passer par le lien
https://developers.google.com/fonts/docs/getting_started
Pour l'importer dans une feuille de style, utilisez
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
Nous pouvons facilement le faire dans css3. Nous devons simplement utiliser l'instruction @import. La vidéo suivante décrit facilement la façon de procéder. alors allez-y et faites attention.