Google Material Symbols最短手順 "静的"フォント(static)活用 Googleホスト & セルフ-ホスト CSS アイコンファイル

app_badgingGoogleアイコン Material Symbols and Icons セルフ-ホスト三部作

linkMaterial Icons セルフ-ホスト

linkMaterial Symbols 静的フォントセルフ-ホスト

linkMaterial Symbols 可変フォント塗りつぶし太字細字セルフ-ホスト

Google Material Symbols アイコン利用の”現場”

まず先に、GoogleのMaterial Symbolsを利用する”現場”から解説

https://fonts.google.com/icons?icon.set=Material+Symbols

上記のページへ行って、アイコンを選択

spanコード型 / CSS content型

Material Iconsと同じ要領、下記ページを参照

linkGoogle Material Icons Googleホスト&セルフ-ホスト

Google Material Symbols Googleホスト：静的フォント(static)

Googleアイコンを呼び出すCSSをWeb側(head要素内)に仕込んでおく必要がある

Google Material Symbols：静的フォント CSS

仕込むCSSは、Google Material Symbolsの３種類のアイコン(Outlined、Rounded、Sharp)、それぞれ別々の記述となる

Google Material Symbols CSS：Outlined：静的フォント

<link  rel="preload"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"  as="style">

<link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"  media="print" onload="this.media='all'">

Google Material Symbols CSS：Rounded：静的フォント

<link  rel="preload"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"  as="style">

<link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"  media="print" onload="this.media='all'">

Google Material Symbols CSS：Sharp：静的フォント

<link  rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"  as="style">

<link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"  media="print" onload="this.media='all'">

Material Iconsと同様、同じCSSを、~~preloadでフェイク？読み込み~~、Googleアイコンを表示するHTMLに出会ったときにスタイルシートとして稼働する、そういう仕組み
⌘ preloadは効果を感じないので取りやめ

&display=swap は、PageSpeed Insightsで警告される「ウェブフォント読み込み中のテキストの表示」対策

この最小限の設定で、spanコード型でもCSS content型でも、WebページにGoogleアイコンが表示されるようになる

Material Symbols セルフ-ホスト：静的フォント(static)

Googleホストは、重く遅くなる
とくに、Material SymbolsはMaterial Iconsとは比べものにならないくらい、重く重い遅く遅い
自サイトにフォントファイルを置いて読み込みを速くしなければ使いものならない

セルフホストは、アイコンファイルをサイトにアップロードしなければならない
また、上記のGoogleホストCSSの中身を編集加工して、セルフ-ホストのアイコンファイルを読み込む設定に書き換え(CSS第１部)
また読み込んだGoogleアイコンを表示するGoogleホストCSSの記述も編集加工する(CSS第２部)

Material Symbols 静的フォントファイルの取得とアップロード

https://gwfh.mranftl.com/fonts

上記ページへ行って、左上の検索窓に「material」と入力

Outlined、Rounded、Sharp の３種類をダウンロード

google-webfonts-helperサイトでMaterial Symbolsアイコンファイルを取得

下にスクロールしていくと、ダウンロードのボタンが現れる

「fonts」などの名前を付けたフォルダーを作成、ダウンロードしたアイコンファイルを格納する

Material Iconsのセルフ-ホストの準備ができましたよ　とアナウンスされる

CSS第１部の実際：静的フォント

CSSはアイコン種類ごとに２部構成で、第１部のメインはセルフ-ホストのアイコンファイルURLの記述

上記にアクセスして、CSSの中身をコピー、「css」フォルダーにgmis.cssとでも名前を付けたファイルを作成してペースト
「gmis」は、次にMaterial SymbolsだけでなくMaterial Iconsのセルフ-ホストも含めるため

src: url('../fonts/～.woff2') format('woff2');

urlのところを、自サイトのアイコンファイルのurlに書き換える
これを３種類のアイコンファイルすべてで繰り返す

これがCSS第１部

CSS第２部の実際：静的フォント

第１部の下に、５種類のアイコンのCSS記述がある。これが第２部

line-height: 1;
display: inline-block;

次に、上記２行を削除して、次の２行に書き換える

display: inline-flex;
vertical-align: middle;

これを５種類のアイコンで繰り返す

Material Symbols and Icons：静的フォント

Material Iconsセルフ-ホストと合体

Material Symbolsだけを使うなら、このままでいいが、同じアイコンならMaterial Iconsのほうが軽く速い
別途作成したMaterial Iconsセルフ-ホスト用のCSSと合体させて、Material Symbols and Icons併存させることをおすすめする

アイコンファイルのフォルダーgmis.cssのアップロードgmis.css読み込みの設定

fontsフォルダーごと、cssフォルダーごとアップロード

最後に、gmis.cssを読み込むタグをhead要素に記述
最初のGoogleアイコンCSSと同じ要領で

<link rel="preload" href="https://サイトURL/css/gmis.css" as="style">

<link rel="stylesheet" href="https://サイトURL/css/gmis.css" media="print" onload="this.media='all'">

Material Symbols and Icons：静的フォント(static)：セルフ-ホストまとめ

Material Symbols and Iconsの静的フォントのアイコンファイルとCSSの具体的な事例
念のためだが、Material Iconsは静的フォントだけで可変フォントはない
Material Symbolsは静的フォントと可変フォントがあり、前者は塗りつぶし(fill)なしで、塗りつぶしアイコンを使うためには可変フォントを採用せざるをえない

Material Symbols and Icons アイコンフォントファイルの一例

今回のMaterial SymbolsとMaterial Iconsの静的font群は次のとおり

Material Symbols
- MaterialSymbolsOutlined-v#-latin-regular.woff2
- MaterialSymbolsRounded-v#-latin-regular.woff2
- MaterialSymbolsSharp-v#-latin-regular.woff2
Material Icons
- material-icons-v#-latin-regular.woff2
- material-icons-outlined-v#-latin-regular.woff2
- material-icons-round-v#-latin-regular.woff2
- material-icons-sharp-v1#-latin-regular.woff2
- material-icons-two-tone-v#-latin-regular.woff2

「v#」は、ダウンロードしたフォントファイルの実際のバージョン
バージョンを記入しておくとgoogle-webfonts-helperのサイトでフォントファイルが更新されたときに分かりやすい