Google Material Symbolsマテリアルシンボル可変フォントFILL(塗りつぶし) 太字セルフ-ホスト CSS

Material Symbols and Icons(マテリアルシンボル＆アイコン) 利用の”現場”

まず先に、GoogleのMaterial Symbols(マテリアルシンボル＆アイコン)を利用する”現場”から解説

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

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

spanコード型

たとえば「Home」なら

右下のコピーアイコンをクリック

<span class="material-icons-outlined">
home
</span>

HTMLの任意の箇所にペースト下記のようにアイコンが表示される(サイズやカラーは別途CSS設定)
といっても、Material IconsのCSSをhead要素に仕込んでおかないと表示されないが…

home

home
１行にしても可

Webアイコンは、spanが使われることが多く、Material Icons(マテリアルアイコン)もやはりspanのclassにGoogleアイコンですよと記述が必要
特徴的なのはspanタグでhomeというコードがマークアップされて、これがGoogleアイコンを特定して呼び出す仕組みになっていること

アイコンが表示されるまでに表示される代替フォント、フォールバックとして、spanコード型のコードのテキストが表示される

また、よくあるWebアイコンとは違ってspanは空タグではないので、空タグ嫌いのWeb通も納得する仕様といえる

CSS content型

このCSS content型は、上述のようなspanをHTMLに埋め込まない

上述のMaterial Symbols and Icons(マテリアルシンボル＆アイコン)のページへのリンクは、右にアイコンが表示されているが

a[target="_blank"]::after {
font-family: 'Material Icons Outlined';
content: "open_in_new"; }

HTML側で外部リンク「target="_blank"」があれば、上述のCSSが稼働してGoogleアイコンを表示させるようにしている

これは、「::after」「::before」などでアイコンを表示させたいときに活躍する

Material Symbols(マテリアルシンボル)の可変スペック

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

Material Symbols(マテリアルシンボル)の種類

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

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

Material Symbols(マテリアルシンボル)の変化

Fill(FILL)：塗りつぶしなし(0)、塗りつぶし(1)
Weight(wght)：アイコンの線の太さ(100～700 中間400)
Grade(GRAD)：Dark Mode/Light Modeで同じ印象のアイコンになるように太さが変化(-25, 0, 200)
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="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="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="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を、Googleアイコンを表示するHTMLに出会ったときにスタイルシートとして稼働する仕組み

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

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

star

star

star

star

Material Symbols(マテリアルシンボル) セルフ-ホスト：可変フォント fill版(太字細字あり)

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

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

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

Material Symbols(マテリアルシンボル) 可変フォントfill版ファイルの取得とアップロード

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

Outlined：可変フォント fill版
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300..400,0..1,0&display=swap
Rounded：可変フォント fill版
https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300..400,0..1,0&display=swap
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/v175/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
}

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

https://fonts.gstatic.com/s/materialsymbolsoutlined/v175/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2

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

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

MaterialSymbolsOutlined-v175-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版

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

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

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

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

<link rel="stylesheet" href="https://サイトURL/css/gmsi.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
  - gmsi.css
- fonts
  - Material Symbolsフォントファイル fill版
  - Material Iconsフォントファイル

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’ #;」で太く細くすることができる

data_check
data_check
100

data_check
data_check
200

data_check
data_check
300

data_check
data_check
400

data_check
data_check
500

data_check
data_check
600

data_check
data_check
700

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="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="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="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から例によって可変フォントフルセット版のファイルを取得しよう

Outlined：可変フォントフルセット版
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap
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
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版のみにしている

Material Symbols 静的フォント(static)ファイルの取得

備忘録として、Material Symbolsの静的フォントのダウンロードの要領を

静的フォントは文字どおり、下記動的フォントのパラメータが効かない

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

静的フォントのメリットは、フォントファイル容量が小さいので表示が速くなること
ちなみに、CSSのfont-sizeでフォントの大きさは変更できる

https://gwfh.mranftl.com/fonts

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

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

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

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

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

電脳流離譚

Google Material Symbolsマテリアルシンボル可変フォントFILL(塗りつぶし) 太字セルフ-ホスト CSS

護日攘夷：救国ぶろぐ