Cómo agregar tipografía de Google Fonts en Nuxt (Vue.js)

Tutorial para agregar cualquier tipografía de Google Fonts en nuestro proyecto de Vuejs (Nuxt) de forma global y sencilla............
Publicado
Actualizado
Engagements 0 Comentario

Para agregar una tipografía de google en Nuxt debemos seguir los siguientes pasos:

Buscar Tipografía

Lo primero que debemos hacer es buscar en Google Fonts la tipografía que deseamos agregar en nuestro proyecto de VueJS Para efectos de ejemplo usaremos Roboto 

Seleccionar Estilos

Luego de elegir nuestra tipografía favorita procedemos a seleccionar los estilos que vamos a usar en nuestro proyecto y hacemos click en "embed" 

Copiar URL

Ahora copiamos la URL de nuestra tipografía

Configuración Nuxt

Editamos nuestro archivo nuxt.config.js y agregamos el siguiente código en el head te dejamos una captura debajo del código con fines ilustrativos 

link: [
                    {
                        rel: 'stylesheet',
                        href:
                            'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'
                    }
                ]

Guardamos

 Listo, ya tenemos agregada nuestra tipografía en todo el proyecto 

Comentarios