ローカルで使用するためのGoogleフォントを抽出および準備するための自動Webクローラー。これは、ヨーロッパのデータ保護法によるものです。 (dsgvo)すべてのフォントファイルを手でダウンロードしてリンクするのは快適です。そこで、プロセスを自動化するために小さなPythonスクリプトを書きました。
「fonts.googleapis.com」URLにGoogleフォントにアクセスすると、ファイルはリクエストの直後に生成されます。したがって、実行時にフォントデータにアクセスするには、WebCrawlerが必要です。
このレポのメインフォルダーでシステムCLIを起動し、次のコマンドを実行します。
python getGoogleFonts.py
その後、古いGoogle-Fontがリンクを含むのを見つけます。このように見えるはずです:
<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">
...
URL自体を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
その後、 export -folder内のすべての無意味なファイルにアクセスできるようになります
すべてのフォントは、 fontsフォルダーにダウンロードされます。それに加えて、 font.css -fileとしてheader.htmlが生成されます。
font.css -fileは次のようになります:
/* 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;
...
新しく生成されたfonts - フォルダーをメインプロジェクトルートのsrcフォルダーに入れます。 srcフォルダーがない場合は、新しいものを作成するだけです。また、 font.css -fileのすべてのフォントsrc -attributesのパスをheader.html -fileと手動で調整することもできます。
font.css -fileをメインプロジェクトルートのcss -folderに配置します。プロジェクトの別のフォルダーを使用する場合は、 header.htmlの最後の行のパスを調整するだけです
header.htmlの内容をコピーして、フォントを使用するすべてのサイトのヘッダーセクションにコピーします。あなたのコードは次のように見えるはずです:
<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" />
...
まだ実装していません