BloggerでGoogle Fonts(モリサワ BIZ UDPGothic)を使う

Windows 10, Windows 11 の閲覧者を想定している場合はCSSの追加だけでokです—詳細

備忘録

Browse Fonts - Google Fonts (BIZ UD 各種)
https://fonts.google.com/?query=BIZ

今回は UDPGothic を使う事にしたので

フォントのページを開いて右上の + をクリックすればコードが出てくるんですが
追記
現在は Get font > Get embed code から

head内追加

<link href='https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700' rel='stylesheet'/>
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&amp;display=swap' rel='stylesheet'/>

CSS追加

body,h1,h2,h3,h4,h5 {font-family: 'BIZ UDPGothic', sans-serif}
これは私が独自に使っているテンプレートの物なので、font-family の部分を変更(他にGoogle フォントを読んでいる場合は必要に応じてそれもコメントアウト)

body {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

数字が好きくないけど、迷ったらこれ使っとけばokかも

関連情報

BIZ UDGothic font family - Typography | Microsoft Learn
https://learn.microsoft.com/en-us/typography/font-list/biz-udgothic