vite plugin webfont dl

vite plugin webfont dl

Descarga de fuentes

v3.10.3

Descargar

? WebFont DowLoad Vite Plugin ⚡

Recopila enlaces web, importaciones y definiciones de su proyecto VITE, descarga CSS y archivos de fuentes (privacidad primero) , agregue las fuentes a su paquete (o sirve a través del servidor de Dev) e inyecta las definiciones de fuentes utilizando un método de bloqueo que no sea de renderizado , mientras tanto almacena CSS externo y archivos de fuentes en un archivo persistente de archivos para el desarrollo de archivos perseguidos para el desarrollo fuera de línea .

? Instalar

npm i vite-plugin-webfont-dl -D

Tabla de contenido

? Instalar
Uso:
- ? Cero config _{^{[método a]}}
- ? Configuración simple _{^{[Método B]}}
¡Eso es todo!
- ? Laravado
- ? Captura de pantalla
? Proveedores web compatibles
Opción
❓ ❓ ❓ ❓ de terceros
? Cómo funciona
- ? Fuentes de Google
- ? Complemento webfont-dl vite
Punto de referencia
Recursos
? Licencia

? Uso: cero configuración _{^{[Método A]}}

Extrae, descarga e inyecta fuentes del fragmento original del código de Google Fonts .

Seleccione a sus familias de fuentes en su proveedor web (p. Ej <head>

 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >

Agregue webfontDownload a sus complementos VITE sin ninguna configuración y el complemento automáticamente se encargará de todo:

 // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( ) ,
  ] ,
} ;

Las etiquetas WebFont originales se reemplazarán en dist/index.html :

 < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

? Uso: configuración simple _{^{[Método B]}}

Extrae, descarga e inyecta fuentes de la URL CSS WebFont configurada .

Seleccione a sus familias de fuentes en su proveedor web (por ejemplo, Google Fonts) y copie las URL CSS del bloque de código "Usar en la web" :
```
 < link href =" [CSS URL] " rel =" stylesheet " >
```

Agregue webfontDownload a sus complementos VITE con las URL CSS de Google Fonts seleccionadas:

 // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( [
      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
    ] ) ,
  ] ,
} ;

¡Eso es todo!

Las infontales se inyectan y están listas para usar .
El complemento realiza su trabajo sin problemas, ya sea que esté trabajando en el servidor de desarrollo local o en la creación de producción.

 h1 {
  font-family : 'Press Start 2P' , cursive;
}

h2 {
  font-family : 'Fira Code' , monospace;
}

? Laravado

Para que funcione con el complemento Laravel Vite, agregue esta línea a su archivo Blade:

 @vite ( ' webfonts.css ' )

? Captura de pantalla

? Proveedores web compatibles

Fuentes de Google : funciona con configuración cero o configuración simple
Fuentes de conejito : funciona con configuración cero o configuración simple
FontShare : funciona con configuración cero o configuración simple
Código Fira , Fonts Hack ( cdn.jsdelivr.net ): funciona con configuración cero o configuración simple
Inter Font ( rsms.me ): funciona con cero configuración o configuración simple
Cualquier proveedor con CSS (que contiene definiciones @font-face ) funciona con una configuración simple

Opción

injectAsStyleTag ( boolean , predeterminado: true ):
Inyecte WebFonts como <style> etiqueta (CSS integrado) o como un archivo .css externo
minifyCss ( boolean , predeterminado: valor de build.minify ):
Minificar el código CSS durante la compilación.
embedFonts ( boolean , predeterminado: false ):
Incrustar fuentes codificadas en Base64 en CSS.
En algunos casos, puede causar un aumento en el tamaño de los archivos si CSS contiene múltiples referencias al mismo archivo de fuente. Ejemplo
async ( boolean , predeterminado: true ):
Evite el uso de los controladores de eventos en línea ( webfonts.css ) que pueden causar problemas de política de seguridad de contenido.
Funciona solo con injectAsStyleTag:false .
cache ( boolean , predeterminado: true ):
Almacene persistentemente CSS y archivos de fuentes descargados en caché de archivos locales.
Si se establece en false se eliminará el caché existente.
proxy ( false|AxiosProxyConfig , predeterminado: false ):
Configuración proxy para solicitudes de red.
assetsSubfolder ( string , predeterminado: '' ):
Mueve archivos de fuentes descargados a subcarpeta separada en el directorio de activos.

uso:

 ViteWebfontDownload (
  [ ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

o:

 ViteWebfontDownload (
  [
    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
  ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

❓ ❓ ❓ ❓ de terceros

️ El uso del método estándar para agregar fontas web de terceros (fuentes de Google, fuentes de conejito o FontShare) a una página web puede ralentizar la carga de página significativamente. Lighthouse and PageSpeed Insights los llama "recursos de bloqueo de renderizado" , lo que significa que la página no puede renderizar completamente hasta que el CSS WebFonts no se haya obtenido del servidor remoto.

? Al evitar los recursos de bloqueo de renderizado causados por los pasos web de terceros, puede aumentar el rendimiento de la página , lo que lleva a una mejor experiencia del usuario y mejora los resultados de SEO .

El complemento descarga las fuentes dadas del servicio de campo web de terceros (como Google Fonts) y las inyecta dinámicamente (como hoja de estilo interna o externa) en su proyecto VITE, transformando los esfuerzos web de terceros en las autoestimadas . ?

? Además del aumento significativo del rendimiento , sus visitantes también se beneficiarán a la protección de la privacidad , ya que no hay un servidor de terceros involucrado.

? Cómo funciona

? Fuentes de Google

Google Fonts genera el siguiente código que debe inyectar en el ejemplo de <head> , Ejemplo :

 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >

Lo que sucede en el lado del cliente con Google Fonts :

La primera línea da una pista al navegador para comenzar el apretón de manos de la conexión (DNS, TCP, TLS) con fonts.googleapis.com . Esto sucede en el fondo para mejorar el rendimiento. [ preconnect ]
La segunda línea es otra pista de preconnección para fonts.gstatic.com . [ preconnect ]
La tercera línea instruye al navegador que se cargue y use un archivo CSS Stylesheet de fonts.googleapis.com (con font-display:swap ) . [ stylesheet ]
El navegador descarga el archivo CSS y comienza a analizarlo. El CSS analizado es un conjunto de definiciones de @font-face que contienen URL de fuentes de fonts.gstatic.com Server.
El navegador comienza a descargar todas las fuentes relevantes de fonts.gstatic.com .
Después de que las fuentes exitosas descarguen el navegador intercambie las fuentes alternativas a las descargadas.

?

? Complemento webfont-dl vite

Por el contrario, el complemento WebFont-DL hace la mayor parte del trabajo en el tiempo de compilación, deja el mínimo del navegador.

Complemento webfont-dl

Recopila las URL CSS WebFont (de Plugin config, index.html y el CSS generado)
Descarga los archivos CSS WebFont CSS
Extrae las URL de fuente
descarga las fuentes
agrega las fuentes al paquete
genera un CSS ( <style> etiqueta) integrado o un archivo CSS externo / CSS
Agrégalos al paquete e inyecte el siguiente código en <head> de su sitio web utilizando un método de bloqueo no renderizado, ejemplo :

 < style >
  @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  ...
</ style >

o (usando el servidor Dev o injectAsStyleTag: false )

 < link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >

Lo que sucede en el lado del cliente con el complemento WebFont-DL :

Cargue las fuentes del CSS incrustado ( <style> etiqueta).

o

La primera línea instruye al navegador que prefiera un archivo CSS para su uso posterior como hoja de estilo. [ preload ]
La segunda línea instruye al navegador que cargue y use ese archivo CSS como una hoja de estilo de " print " (bloqueo sin renderizado) . Después de cargarlo, promueva a " all " la hoja de estilo de tipo medios (eliminando el atributo " media "). [ stylesheet ]