Google Material Symbols最短手順 可変フォントFILL(塗りつぶし) 太字細字あり Googleホスト & セルフ-ホスト CSS アイコンファイル

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

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

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

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

spanコード型 / CSS content型

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

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

Material Symbolsの可変スペック

マテリアルアイコンの可変アイコンは、次のようにアイコンを変化させることができる

Material Symbolsの種類

まずMaterial Symbolsの３種類について

1. Outlined：普通
2. Rounded：1より丸みが出る
3. Sharp：2とは逆に1がさらに角張る

Material Symbolsの変化

1. Fill(FILL)：塗りつぶしなし(0)、塗りつぶし(1)
2. Weight(wght)：アイコンの線の太さ(100～700 中間400)
3. Grade(GRAD)：Dark Mode/Light Modeで同じ印象のアイコンになるように太さが変化(-25, 0, 200)
4. Optical size(opsz)：サイズが変わってもが同じ印象のアイコンになるように太さが変化(20～48)

GoogleアイコンのCSSの可変パラメータ

opsz,wght,FILL,GRAD@24,300..400,0..1,0

今回は、FILLとWeightの可変のみ選択、他の変化は無視する

Material Symbols FillのCSS

Material Symbolsの変化はCSSで設定できる

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

今回はMaterial Symbolsのfill版のために、CSSに次の記述を加えておく

.fill { font-variation-settings: 'FILL' 1; }

Google Material Symbols Googleホスト：可変フォント fill版(太字細字あり)

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

マテリアルアイコン：可変フォント fill版 CSS

仕込むCSSは、Google Material Symbolsの３種類のアイコン(Outlined、Rounded、Sharp)、それぞれ別々の記述、可変フォントかつfillおよび「’wght’ 300」が利用できるものとする

マテリアルアイコンCSS：Outlined：可変フォント fill版(太字細字あり)

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

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

マテリアルアイコンCSS：Rounded：可変フォント fill版(太字細字あり)

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

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

マテリアルアイコンCSS：Sharp：可変フォント fill版(太字細字あり)

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

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

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

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

この最小限の設定で、spanコード型でもCSS content型でも、WebページにGoogleアイコン、Material Symbols fill版が表示されるようになる
fill版とは、塗りつぶし有り無しを表示できるアイコンフォントという意味

Material Symbols セルフ-ホスト：可変フォント fill版(太字細字あり)

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

セルフホストでも、Material Symbols可変フォントはやはり重く遅い
Material Symbols fill版で、少しでも軽く速くしたい
ところが、マテリアルアイコンの可変フォントファイルは、非常にゲットしづらい
しかも、入手しづらい可変フォントファイルを入手できなければ、アイコンファイルをサイトにアップロードもできない

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

Material Symbols 可変フォントfill版ファイルの取得とアップロード

マテリアルアイコンの可変フォントは、かなり入手しづらい
そこを乗り越えて、なんとかしてみよう

1. Outlined：可変フォント fill版
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300..400,0..1,0&display=swap
2. Rounded：可変フォント fill版
   https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300..400,0..1,0&display=swap
3. Sharp：可変フォント fill版
   https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,300..400,0..1,0&display=swap

上記リンクをクリックして、表示されるCSSに注目
たとえば、１は次のようなテキストが表示される

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v141/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJU22ZZLsYEpzC_1ver5Y0.woff2) format('woff2');
}

上記の赤い文字列が、1.Outlined：可変フォント fill版

• https://fonts.gstatic.com/s/materialsymbolsoutlined/v141/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJU22ZZLsYEpzC_1ver5Y0.woff2

CSSの中身を丸ごと、cssフォルダー内の「gmis.css」に、コピーアンドペースト

次に、urlの中をコピーして、ブラウザーのアドレス欄にペースト、フォントファイルがダウンロードできる

MaterialSymbolsOutlined-v138-fill.waff2

たとえば、上記のように名前を付けて、fontsフォルダーに格納
そして、gmis.css のurlを、自サイトのフォントURLに変更する

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

他の、Rounded：可変フォント fill版、Sharp：可変フォント fill版も、同じ要領でCSSを表示してフォントファイルをダウンロードしていく

CSS第１部の実際：可変フォント fill版

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

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

これがCSS第１部

CSS第２部の実際：可変フォント fill版

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

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

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

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

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

Material Icons + Material Symbols 可変フォント fill版

マテリアルアイコン セルフ-ホストと合体

アイコンファイルのフォルダー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 Icons / Material Symbols可変フォント fill版(太字細字あり)：セルフ-ホスト まとめ

Material Iconsは静的フォントだけで可変フォントはない
Material Symbolsは、今回は塗りつぶし(fill)ありの可変フォント
しかも、太字細字も設定が可能

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

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

• Material Symbols 可変アイコン fill版
  • MaterialSymbolsOutlined-v#-fill.woff2
  • MaterialSymbolsRounded-v#-fill.woff2
  • MaterialSymbolsSharp-v#-fill.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#」は、ダウンロードしたフォントファイルの実際のバージョン
バージョンを記入しておくとCSSでフォントファイルが更新されたときに分かりやすい

ディレクトリー構成の一例

サイトによってディレクトリー構成は違うだろう、またWordPressの場合はテーマのディレクトリーに格納する
下記はあくまでも一例としてご理解を

• サイトルート
  • css
    • gmis.css
  • fonts
    • Material Symbolsフォントファイル fill版
    • Material Iconsフォントファイル

CSSファイルの一例

上記のようなアイコンフォントと、ディレクトリー構成の場合の、Googleアイコン用CSSのサンプルを

linkgmsi.cssサンプル

CSS記述について(塗りつぶし/太字細字)

今回ゲットしたMaterial Symbolsアイコンフォントファイルは、FILL(塗りつぶし)のほかに、フォントの太さも(通常は font-weight)CSSで設定できるようになっている
font-weight: 300 400; がキモになる

font-variation-settings: 'FILL' 0,'wght' 600;
font-variation-settings: 'FILL' 1,'wght' 200;

上は、塗りつぶしなし、太字(なぜか600の font-weight が効く)
下は、塗りつぶしあり、細字(これまた200の font-weight も効く)
塗りつぶしも欠かせないが、細字のアイコンもくっきりしてマテリアル度が高まるような気がする…

Material Symbols wght 100～700 サンプル

今回のMaterial Symbols fill版(300-400)で、次のようにフォントウェイト(font-weight 太字細字)は、「font-variation-settings: ‘wght’ #;」で太く細くすることができる

Google Material Symbols Googleホスト：可変フォント フルセット版

結論として、Googleホストでも、セルフ-ホストのフォントファイルゲットのためでも、CSS次第
最後に、Material Symbolsのフルセット版 GoogleホストのCSSを書き残しておきたい

GoogleホストのCSSでも、上述を参考にフォントファイルを入手できるので、Googleホストは当たり前として、セルフ-ホストのネタにはできると思われる

マテリアルアイコン：可変フォント フルセット版 CSS

仕込むCSSは、Google Material Symbolsの３種類のアイコン(Outlined、Rounded、Sharp)、それぞれ別々の記述、可変フォントのフルセットである

マテリアルアイコンCSS：Outlined：可変フォント フルセット版

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

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

マテリアルアイコンCSS：Rounded：可変フォント フルセット版

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

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

マテリアルアイコンCSS：Sharp：可変フォント フルセット版

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

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

Material Symbols 可変フォントフルセット版ファイルの取得

上記のCSSから例によって可変フォントフルセット版のファイルを取得しよう

1. Outlined：可変フォントフルセット版
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap
2. Rounded：可変フォント fill版
   https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap
3. Sharp：可変フォント fill版
   https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap

今までの要領で、フォントファイルを入手しサイトにアップロード、セルフ-ホスト用のCSSを設定しよう

Material Symbols and Icons アイコンフォントファイル容量一覧例

今回のMaterial SymbolsとMaterial Iconsのフォントファイル容量は次のとおり

Material Symbols 可変フォント フル

• Outlined：2802KB
• Rounded：3628KB
• Sharp：2489KB

Material Symbols 可変フォント fill版

• Outlined：823.5KB
• Rounded：1000.2KB
• Sharp：749.8KB

Material Symbols 静的フォント

• Outlined：225KB
• Rounded：361KB
• Sharp：303KB

Material Icons

• material-icons：126.4KB
• material-icons-outlined：152.4KB
• material-icons-round：170.3KB
• material-icons-sharp：133.6KB
• material-icons-two-tone：211.4KB

WordPress最新テーマのMaterial Symbols and Iconsセルフ-ホスト設定

フォントファイルの容量が大きすぎると、PageSpeed Insightsで「過大なネットワーク ペイロードの回避」の警告が出る
WordPress最新テーマでは、Material Symbolsの可変フォント fill版およびMaterial Iconsのセルフ-ホストを設定済み

なお、当サイトではどうしても「font-variation-settings: ‘wght’ 300;」をメインに使いたい、少しでも軽く速くするためにMaterial Iconsは無し、Material Symbols 可変フォントfill版のみにしている