こんにちは、フロントエンドエンジニアの岡崎です。2022年にリリースしたLINEのコーポレートフォント「LINE Seed JP」は、おかげさまで多くのプロジェクトで採用されてきました。
これまではセルフホストや特定のCDNを通じての利用が主流でしたが、この度、Google Fontsからの提供を開始しました。公開に至った背景については、LINEヤフーDESIGN 公式noteの「LINE Seed JPをGoogle Fontsで公開した理由」で詳しくご覧いただけます。
本記事では、Google Fontsへの登録による技術的背景と、そのメリットについて解説します。
https://fonts.google.com/specimen/LINE+Seed+JP
なぜGoogle Fonts登録を目指したのか？
Webフォントのデプロイと運用コストを削減し、世界中どこからでも最速でLINE Seed JPを表示できる状態を目指しました。
ファイルサイズ
LINE Seed JPには4種類のウェイトがあり、すべてを含んだ状態のファイルサイズは10MBを超えてしまいます。
| 言語 | 形式 | Thin | Regular | Bold | ExtraBold | Total |
|---|---|---|---|---|---|---|
| LINE Seed JP | WOFF | 2.3MB | 2.5MB | 2.7MB | 2.8MB | 10.2MB |
| WOFF2 | 2.0MB | 2.1MB | 2.2MB | 2.2MB | 8.1MB | |
| EOT | 1.8MB | 1.9MB | 2.0MB | 2.0MB | 7.7MB |
提供方法
バージョニングにより一貫したデザイン性の担保、日本語特有のファイルサイズとパフォーマンスのトレードオフ、これらを実現するためにGoogle Fontsからの提供を開始しました。
| これから | いままで | |
|---|---|---|
| 提供方法 |
|
|
| Pros |
|
|
| Cons |
|
|
すぐに使えるLINE Seed JP
最もシンプルな実装は、<head>に以下を記述するだけです。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=LINE+Seed+JP">
<style>body { font-family: "LINE Seed JP"; }</style>しかし、これではパフォーマンス的な懸念があります。
パフォーマンスを考慮した実装方法
preconnect
フォントファイルをダウンロードしに行く前 に、あらかじめ名前解決と接続を済ませておきます。これだけで100ms〜500ms程度の高速化が見込めます。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>font-display: swap;
フォントがダウンロードされるまでの間、システムフォントを表示させる設定です。文字が表示されない「空白の時間（FOIT）」をゼロにします。
<link href="https://fonts.googleapis.com/css2?family=LINE+Seed+JP&display=swap" rel="stylesheet">必要なweightの厳選
Google Fontsは、リクエストされたウェイトごとにCSS内の @font-face 定義（unicode-range の指定）を生成します。4種類すべてのウェイトをリクエストすると、ブラウザーがダウンロード・解析しなければならないCSSの記述量が膨大になり、フォントのレンダリング開始が遅れる原因となります。
標準（400）しか使っていない場合は、「weight(wght)」を明示的に伝えます。
<link href="https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400;&display=swap" rel="stylesheet">日本語Webフォントの救世主
日本語フォントは数千文字のグリフを含むため、LINE Seed JPフルセットでは10MBに達します。これをWebで実用的にするために欠かせないのが、必要な文字だけを抽出する「サブセッティング 」です。
Google Fontsが裏で行っている「自動分割」
Google Fontsに登録されると、エンジニアが何もしなくても以下の Dynamic Subsetting が適用されます。
- 仕組み: Googleは日本語フォントを約100個以上の小さな「スライス（分割ファイル）」に細分化して保持しています。
- CSSの挙動: APIが返すCSSには、各スライスに対応する unicode-range が記述されています。
- ブラウザーの最適化: ブラウザーはページ内の文字を解析し、その文字が含まれるスライスだけを自動的にダウンロードします。
特定の文字だけを配信する「textパラメータ」
「ロゴやキャッチコピーの数文字だけに使いたい」という場合は、APIリクエストにtextパラメータを加えることで、その文字専用の極小フォントファイルをオンザフライで生成させることができます。
<link href="https://fonts.googleapis.com/css2?family=LINE+Seed+JP&text=ARIGATO" rel="stylesheet">Google Fontsへの登録方法
Google Fontsへの登録に興味がある方に向けて、フォントの登録までのプロセスについて少しだけ紹介します。
Google Fontsへの登録は、単にファイルを送る作業ではなく、「オープンソース・プロジェクトとしての品質管理プロセス」に近いです。登録のステップを4つのフェーズでまとめました。
1. ライセンスとリポジトリの準備
Google Fontsに掲載されるには、SIL Open Font License (OFL) で公開されていることが絶対条件です。
- GitHubでの公開: フォントのソースファイル（設計データ）を含め、パブリックリポジトリで管理されている必要があります。
- 名前の衝突確認: 既存のフォント名と重複していないか、Namecheck等で確認します。
具体例
2. 必須ファイルのパッケージング
googlefonts-project-template をベースに Upstream repository structure のファイルセットを用意します。
具体例
3. 厳格なバリデーション
Googleが公開している検証ツール fontspector を使い、数百に及ぶチェック項目をパスする必要があります。
pip install fontspector
fontspector [yourfont].ttf- レポート生成: フォントの品質に関するレポートが生成されます。フォントのメトリクス、グリフの問題、互換性の警告などが含まれます。
- 修正: レポートを確認し、必要な修正を行います。
4. Google Fontsへのコントリビュート
技術者の方は、Google Fontsに以下の方法でコントリビュートします。非技術者の方は、メールでの申請も可能です。
- Issue: プロジェクトのソースリポジトリへのリンクを記載したIssueを作成します。
- Pull Request: Googleのオンボーダー(担当者)によって、PRが作成されレビューが始まります。
- SandboxからProductionへ: レビューを通過すると、まずテスト環境（Sandbox）にデプロイされ、最終確認を経て全世界のCDN（Production）へ反映されます。
具体例
- https://github.com/google/fonts/issues/7561
- https://github.com/google/fonts/pull/10011
- https://github.com/orgs/google/projects/74/views/4
おわりに
Webフォントは、Web専用と思われがちですが、実はiOSやAndroidアプリでも使えます。Google Fontsはデジタルプロダクト全般の共通インフラと言えるでしょう。
技術の力を活用し、デザインの自由度とより良いユーザー体験を両立させていきましょう！最後までお読みいただき、誠にありがとうございました。
