web-dev-qa-db-fra.com

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 HEAD du document. Je me demandais s'il y avait un moyen d'importer la police Web à partir du fichier CSS?

csscss3fontsgoogle-webfonts
227
David

Utilisez la méthode @import :

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

De toute évidence, "Open Sans" (_Open+Sans_) est la police importée. Alors remplacez-le par le vôtre. Si le nom de la police contient plusieurs mots, encodez-le en ajoutant un signe _+_ entre chaque mot, comme je l'ai fait.

Assurez-vous de placer le _@import_ tout en haut de votre code CSS, avant toute règle.

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

339
ModernDesigner
<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 link, comme indiqué ci-dessus, dans la tête de votre mise en page.

57
Burk

Ajoutez le code ci-dessous dans votre fichier CSS pour importer les polices Web de 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;
}
29
Shubham Kumar

Téléchargez la police ttf/autres fichiers au 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;
}
28
Fidel ramadhan
  1. Il suffit d'aller à https://fonts.google.com/
  2. Ajouter une police en cliquant sur +
  3. Allez à la police sélectionnée> Incorporer> @IMPORT> copier l'URL et coller dans votre fichier .css au-dessus de la balise body.
  4. C'est fait.
12
karunesh

Utilisez le tag @import

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

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

Avantage:

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

  • choisissez vos polices

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

E.g votre_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;}
5
MarcoZen

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 pourrez peut-être également jeter un iframe au sommet de votre contenu. Ce serait probablement plus lent - il est préférable de l'inclure dans votre CSS.

3
Eric Keyte

Jus passe 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');
1
subindas pm
<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

Ecrivez le nom de la police de votre choix sur le site Web, sans les crochets.

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

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

Ensuite, vous pouvez utiliser ceci normalement comme famille de polices dans tout votre fichier HTML/CSS.

Par exemple 

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

Nous pouvons facilement le faire en CSS3. Nous devons simplement utiliser l'instruction @import. La vidéo suivante décrit facilement la manière de procéder. alors allez-y et faites attention.

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

0
Gyan