Comment importer Google Web Font dans un fichier CSS?

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?

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.

<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.

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;
}

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.

Utilisez la balise @import

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

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;
}

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.

https://www.youtube.com/watch?v=wlPr6EF6GAo