些細な日常

Bloggerでのフォントの変更はテーマデザイナーかテンプレートのソースコードの編集で行う。何れも管理画面のテーマに入り、前者はカスタマイズ、後者はメニュー（▼）のHTMLを編集かバックアップと元に戻すで可能だ。 目次 ガジェットのフォントの変更 英数字のフォントのカスタマイズ CSSによるフォントの変更 ソースコードの指定先について Variableタグから変更する Webフォントを導入する ガジェットのフォントの変更 テーマデザイナー｜ Blogger Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。 テンプレートによって項目の種類や数は変わる。 公式テーマのContempoで変更可能なフォント ページのテキスト（個別に指定されない全て） ブログタイトル（ヘッダー） タブのテキスト（項目のみ） 投稿 投稿タイトルのフォント 投稿タイトルのストリームのフォント 投稿テキストのフォ…

Google Fonts で日本語のWebフォント（ Japanese ）が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。 Google Fontsの日本語フォント 種類が非常に多くて五十二件（2022年2月時点）から二十件のみ掲載する。 Noto Sans Japanese （ 適用 ） Noto Serif Japanese （ 適用 ） Shizuru （ 適用 ） M PLUS Rounded 1c （ 適用 ） Zen Kaku Gothic Antique （ 適用 ） Sawarabi Mincho （ 適用 ） Kosugi Maru （ 適用 ） Kaisei Decol （ 適用 ） Shippori Mincho （ 適用 ） Delta Gothic One （ 適用 ） Reggae One （ 適用 ） Kiwi Maru （ 適用 ） Murecho （ 適用 ） Yusei Magic （ 適用 ） Yuji Syuku （ 適用 ） Hachi Maru Po…

Bloggerブログの公式テーマは最初から設定されているWebフォントがたとえ他のフォントを新たに表示するべく変更してもソースコードに出力されてしまう分かった。 サイトの容量を増やして 表示速度／ページのダウンロード時間 を必要以上に遅らせると懸念されるから消しておかなくては勿体ない。 些細な日常は Contempoを使っている けれども調べると最初から設定されてないWebフォントまで出力されていたんだ。 デザインのパターンが、四種類、あって他の分まで入っているせいではないか。元々はRobotoなのにDamianやPlayfair Displayと使われているはずのない見たことも聞いたこともないWebフォントがソースコードに記載されていると驚いた。 Contempoの基本的なテンプレートが四種類のデザインで使い分けられるように提供されていてテンプレート自体がそれぞれのデザインに合ってないから他の分の無駄…

ホームページ （ブログへ移転）で Google Fonts の Early access から 日本語フォントのNoto Sans Japanese を無料で使っている。とても気に入っていて Androidのスマホでマシュマロから搭載されている のも嬉しいかぎりだ。 しかしWebフォントとしてホームページにCSSへlinkのstylesheetや@importで取り込んで表示するのは非常に厳しくて表示速度を著しく低下させる。日本語は漢字が多くて英語などと比べるとデータサイズを大幅に増やしてしまうせいだ。3MBくらいだからちょっとした画像を300KBとして換算しても、百枚、載せているのと変わらない。 追記： Google Fonts launches Japanese support （Googleフォントは日本語のサポートを開始）によるとフォントスライシングシステムによって、八割程、日本語のファイルサイズを削減で…

スマホやタブレットでサイトを閲覧する場合、CSSで文章にフォントを指定しておいても殆ど反映しない。フォントをサーバーからブラウザに読み込ませなくては無理なわけなんだ。 Webフォントを使ってサーバーに使いたいフォントのファイルをアップロードするか、またはCSSに外部サイトから取り込んで使うこともできる。 前者よりも後者が手軽なので、やってみたいと思って Google Fonts が質量共に充実しているけれども無料で提供されていて日本語フォントのNoto Sans Japaneseが何よりも素晴らしくて気に入ってしまった。 Noto Sans JapaneseはGoogle Fontsの Early access! から手軽に取り込むことができる。 サイトでの使い方としてはHTML編集のhead内にlinkタグで置くか、styleタグのところに@importで置くかしながら表示したいところにCSSのfon…