Crawler web automático para extraer y preparar las fuentes de Google para uso local. Esto es Nessessary debido a la ley europea de protección de datos. (DSGVO) La descarga y el enlace todos los archivos de fuentes a mano es una marea. Así que escribí un pequeño script de Python para automatizar el proceso.
Al acceder a Google Fonts a través de la URL "Fonts.googleapis.com", el archivo se genera poco después de la solicitud. Por lo tanto, se necesita un WebCrawler para acceder a los datos de fuentes en tiempo de ejecución.
Inicie la CLI del sistema en la carpeta principal de este repositorio y ejecute el siguiente comando:
python getGoogleFonts.py
Después de eso, encuentre la antigua fuente de Google incluye el enlace. Debería verse algo así:
<html>
<header>
<title>My website</title>
...
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900" rel="stylesheet">
...
Ingrese solo la URL en la Python Cli Promt:
Please copy your Google® fonts include URL here:
https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900
Después de eso, podrá acceder a todos los archivos de seguridad dentro de export -Folder
Todas las fuentes se descargarán a las fonts -folder. Además de eso, se genera un header.html como un archivo font.css .
El archivo font.css se parece a esto:
/* CORMORANT GARAMOND | latin-ext */
/* italic-700 */
@font-face{
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 700;
src: url('../src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* normal-700 */
@font-face{
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
...
Coloque las fonts recién generadas en la folidera src de la raíz de su proyecto principal. Si no tiene un src -Folder, simplemente cree uno nuevo. También puede ajustar manualmente las rutas de todas las fuentes src -Attributes en la font.css -File, así como el header.html -file.
Coloque la font.css -File en la Folder css de la raíz de su proyecto principal. Si desea usar otra carpeta de su proyecto, simplemente ajuste la ruta de la última línea en header.html
Copie el contenido del header.html en la sección del encabezado de cada sitio en el que desee usar las fuentes. Su código debería verse algo así:
<html>
<header>
<title>My website</title>
...
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin.woff2" crossorigin="anonymous" />
<link rel="preload stylesheet" as="style" href="./css/font.css" />
...
¿Qué todavía está para implementar?