Google Fonts の URL の見つけ方
ファビコンデザインにカスタムフォントを使うため、Google Fonts の URL の見つけ方とコピー方法を、手順ごとに説明します。
なぜ Google Fonts か Google Fonts をおすすめする理由は、サイト上のフォントが商用でも無料で使えるからです。ライセンスや追加費用を気にせず、ファビコンに使えます。
手順
ステップ 1：Google Fonts を開く
ブラウザで fonts.google.com を開きます。無料フォントを数千種類閲覧できる、公式の Google Fonts サイトです。
ステップ 2：フォントを選ぶ
コレクションを見て、使いたいフォントをクリックします。ページ上部の検索バーで、特定のフォントを探すこともできます。
ステップ 3：選択にフォントを追加する
気に入ったフォントが見つかったら、ページ右上の "Get font" をクリックします。これで選択に追加されます。同じ操作を繰り返して複数フォントを足せます。このファビコンメーカーは、1 つの URL から複数フォントを読み込めるので、必要なだけ追加してください。
"Get font" はページ右上にあります
ステップ 4：選んだフォントを開く
追加し終わったら、右上の "View selected families" を探します。選んだフォント数がバッジで出ます。クリックしてコレクションを開き、"Get embed code" をクリックするとコードスニペットが表示されます。
"View selected families" のあと "Get embed code" をクリック
すべての link タグが出る埋め込みコードのダイアログ
ステップ 5：フォント URL を取り出す
Google Fonts は、preconnect 用とメインのスタイルシート用など、複数の link タグを出します。次のような内容です。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> URL に css2 が含まれる link タグを探してください。いちばん長いものです。href 属性の引用符のあいだにある URL をすべてコピーします。上の例では、URL は次のとおりです。
https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap ファビコンメーカーのカスタムフォント入力欄に貼り付けます。この 1 本の URL に、選んだフォントがすべて含まれています。
ヒント
- パフォーマンスのため、URL には必ず &display=swap を含めてください
- 読み込み時間を抑えるため、実際に使うフォントだけ選んでください
- URL は途中で切らずにすべてコピーしてください。途中だとフォントの読み込みに失敗することがあります