¿Cómo agrego una fuente de Google a un componente de VueJS?

Posteriormente a observar en varios repositorios y foros al concluir encontramos la respuesta que te compartiremos a continuación.

Solución:

La forma más rápida es importar la fuente en un archivo CSS, por ejemplo App.csssi todos los componentes deberían tenerlo:

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

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


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

Google Fonts también muestra la declaración de importación.

Seleccione sus fuentes, haga clic en Embed y luego @import en la ventana de selección:

Imo, si está utilizando VueJS, Google Fonts Webpack Plugin es el camino.

Aquí está el complemento, es realmente fácil de configurar y funciona de maravilla.

npm i google-fonts-webpack-plugin -D

Ir a tu /webpack.config.js / webpack.base.config.js y agrega las siguientes lineas:

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" ] 
            ]
        )
    ]

Ahora puede usar Google Fonts en cualquier lugar dentro de su proyecto VueJS 🙂

Me gustaría agregar a la respuesta dada por msqar. Si va a utilizar el complemento Webpack de fuentes de Google: (https://www.npmjs.com/package/google-fonts-webpack-plugin) y está utilizando la CLI de Vue, puede agregar un archivo vue.config.js dentro de la raíz de su proyecto. Consulte los documentos de la CLI de Vue: (https://cli.vuejs.org/guide/webpack.html#simple-configuration)

Luego agregue el código a ese archivo:

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

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

Te mostramos comentarios y puntuaciones

Si posees algún aprieto y disposición de aclararse nuestro tutorial puedes añadir un informe y con deseo lo interpretaremos.

---

---

Utiliza Nuestro Buscador