web-dev-qa-db-fra.com

Comment ajouter une police Google à un composant VueJS?

Cela fait une heure que j'essaie de trouver un moyen d'importer une police Google dans un composant VueJS, mais je n'arrive pas à trouver de solution. Rien n'a encore fonctionné, pas plus que les questions précédentes. Toutes les réponses que j'ai trouvées ont entre 1,5 et 2 ans maintenant. J'apprécierais beaucoup si quelqu'un pouvait suggérer une solution à jour.

J'utilise VueJS2 + Webpack + Vue-cli

vue.jsfontsvuejs2
2
Holiday

Le moyen le plus rapide est de l'importer dans un fichier CSS, par exemple App.css, si tous les composants le possèdent:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto Condensed', sans-serif;
}

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

#app {
  font-family: 'Roboto Condensed', sans-serif;
}

La déclaration d'importation est également affichée par Google Fonts (cliquez sur @IMPORT dans la fenêtre de sélection):

 Google Fonts

10
Bennett Dams

Je voudrais ajouter à la réponse donnée par msqar. Si vous allez utiliser le plug-in Webpack de Google Fonts: ( https://www.npmjs.com/package/google-fonts-webpack-plugin ) Et que vous utilisez la Vue CLI, vous pouvez ajouter un fichier vue.config.js à la racine de votre projet. Voir la documentation CLI de Vue: ( https://cli.vuejs.org/guide/webpack.html#simple-configuration )

Ajoutez ensuite le code à ce fichier: 

 const GoogleFontsPlugin = require("google-fonts-webpack-plugin");

 module.exports = {
    chainWebpack: config => {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Source Sans Pro" }
                ]
            })
        ]
     }
 }
1
Michael Hicks

Mais si vous utilisez VueJS, le plugin Google Fonts Webpack est la solution. 

Voici le plugin , il est très facile à configurer et fonctionne à merveille.

npm i google-fonts-webpack-plugin -D

Accédez à votre /webpack.config.js/webpack.base.config.js et ajoutez les lignes suivantes:

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

module.exports = {
    "entry": "index.js",
    /* ... */
    plugins: [
        new GoogleFontsPlugin({
            fonts: [
                { family: "Source Sans Pro" },
                { family: "Roboto", variants: [ "400", "700italic" ] }
            ]
        })
    ]
}

Vous pouvez maintenant utiliser les polices Google n'importe où dans votre projet VueJS :) 

1
msqar