📟

eleventy-google-fontsを作った

2021/01/03に公開

JavaScript

`eleventy-google-fonts`

これは11tyのプラグインです。Google FontsのCSSをダウンロードしてインライン化してくれます。
やってることはNext.jsのFont Optimizationとほぼ同じです。
PR待ってます。

使い方

npm install eleventy-google-fonts --save-dev

11tyのconfigに下記コードを追加します。

const eleventyGoogleFonts = require("eleventy-google-fonts");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyGoogleFonts);
};

プラグインを登録すると eleventyGoogleFonts というショートコードがテンプレートの中で使えるようになります。（現在はNunjucksのみサポートしてます。）
ショートコードにGoogle FontsのURLを渡せばOKです。

<head>
  ...
  {% eleventyGoogleFonts 'https://fonts.googleapis.com/css2?family=Overpass:wght@600&display=swap' %}
  ...
</head>

やってること

基本的にNext.jsのFont Optimizationとやってること同じです。
Google FontsのCSSをダウンロードしてインライン展開しています。

Next.jsではHTML中のタグを書き換える方式をとっていますが、今回は11tyで使えるショートコードにURLを渡す形式を採用しました。
そのほうが実装が単純になるのと、自分で宣言するほうが使いやすいかなと思ったのでそうしました。

しかし .11ty.js .liquid .njk の3テンプレートしかショートコード内での非同期処理に対応していないため、それ以外のテンプレートに対応するにはビルドされたHTML中のタグを書き換える方式を取るのが良さそうかなと思います。（気が向いたら書き換えます。）

FYI: この「ビルドされたHTMLに変更を加える」挙動は11tyのTransformsという機能を使えば実現できます。11tyって便利ですね。

module.exports = function(eleventyConfig) {
  eleventyConfig.addTransform("transform-name", function(content, outputPath) {});
};

効果

僕のブログを題材にLighthouseでスコア計測してみました。
https://takanorip.com/blog/review-2020/

使用前

使用後

めっちゃ改善した。

ロードマップ

今後は下記項目への対応もやっていきたいです。

Nunjucks 以外のテンプレートへの対応
パフォーマンス改善
フォントファイルのダウンロード、CSSのパス書き換え

eleventy-google-fonts

使い方

やってること

効果

ロードマップ

Discussion

`eleventy-google-fonts`