Warning: Undefined variable $sc_Linkcard in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 146
Web フォント。日本語は少ないけど英字は特にいろいろあってGoogle Fontsはいい。利用は無料。
ただサーバーからの読み込みなのであまり種類を使いすぎるとページの読み込みに時間がかかる。日本語はさらにデータ量が多いらい。（思い切り使っているけど）使いすぎないようにする。
ブラウザ表示のフォントは基本ローカル環境のフォントに依存していて、各人で変更ができてしまう。造り手のデザインイメージを大きく変えられてしまう。そういう意味でフォントも指定するのはもちろん、PCにないフォントはGoogleから表示させてしまえ。
まずはGoogle Fontsにアクセスしてフォントを物色。ヘッダの真ん中あたりにあるプルダウンで「Custum」を選び使いたい英文を入力。その下のCategoryやLanguageでソート。出てきた色んなフォントを比較する。
Stay hungry. Stay foolish.「ハングリーであれ。愚か者であれ」byスティーブ・ジョブズ
自分の使ってみたいフォント詳細ページに行きさらに使いたい書体の右側の「+Select this style」をクリックして選択。複数選んで最後にまとめて処理できるので、このまま別のフォントを物色して同様に選択しておく。
ヘッダーの右にある「View youre selected families」をクリックすると自分の選択した書体が一覧される。問題がなければその下のソースをコピーする。@importで読み込むよりはlink要素で連続的に読み込んだほうが多少早いと信じているが。
<head>〜</head>の間に以下をコピペ
<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=Dongle:wght@300&family=Poppins:wght@700&display=swap" rel="stylesheet">使いたいタグに対して以下スタイルを指定
font-family: 'Dongle', sans-serif;
font-family: 'Poppins', sans-serif;以上。簡単だ。使いすぎに注意しよう。海外の謎のフリーフォントをDLしてロゴ画像を作っていた頃がなつかしい。
NOTICES
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。