💻

Typefacesを使用してGoogle Fontsをセルフホスティングする

2021/03/07に公開

Jest

はじめに

タイトル通りTypefacesを使用してGoogle Fontsをセルフホスティングする方法です。

Typefacesとは

TypefacesはGoogle Fontsをセルフホスティングするためのnpm packagesです。

ここでセルフホスティングすると何が嬉しいのかを一言で言うとパフォーマンスです。

通常Google Fontsを利用する場合、サイトが読み込まれた時にフォントファイルをフェッチする必要があるため、パフォーマンスに影響があります。
最近話題のCore Web Vitalsで言うと、LCPとCLSに影響があると考えられます（こちらの記事が参考になります）。

Typefacesを使用してGoogle Fontsをセルフホスティングすることでフォントファイルのフェッチが不要になるため、パフォーマンスがよくなるという理屈です（もちろんそこまで大きな影響はないと思うので、個人的には「影響がないことはないよ！やれるならやっとこう！」くらいのイメージです）。

導入方法

導入は非常に簡単です。

まずは導入したいGoogle Fontsのtypefaceをプロジェクトにインストールします。
以下はMontserratを導入する場合の例です。

// npmの場合
npm install typeface-montserrat

// yarnの場合
yarn add typeface-montserrat

ちなみにTypefacesの一覧はこちらのリポジトリから確認できます。

インストールが完了したら、そのGoogle Fontsを使用したいファイルでimportすれば普通に使用できます。非常に簡単ですね。

import 'typeface-montserrat'

Jestでスナップショットをしている場合

Jestでスナップショットをしている場合、typefacesを使用していると以下のようにテストが落ちてしまいます。

● Test suite failed to run

    /<your_project_dir_path>/node_modules/typeface-montserrat/index.css:2
    @font-face {
    ^

    SyntaxError: Invalid or unexpected token

この場合、テスト用のモックを用意する必要があります。以下のようにモックファイルを作成し、jest.config.jsに設定を追加します。

style.mock.js

module.exports = 'style-mock'

jest.config.js

moduleNameMapper: {
  'typeface-montserrat': '<rootDir>/<your_mocks_dir_path>/style.mock.js',
},

これでテストがパスするはずです。

おわりに

以上のように非常に簡単に導入することができました。
Jestでスナップショットをしている場合はモックを用意する必要があるので、そちらも参考にしてみてください。