DarkgrayのホームページをPukiwikiに更新して常々思ってることは ページの最上部のページ名を表示してる所、ここのフォントはゴシックじゃなくて 流れるようなデザインのTimes New Romanみたいなフォントを使いたいって事で・・・
ただですね・・・ フォントは閲覧するデバイスに依存するから こちらの思うように見てもらえるかどうか分からないと言う問題があって これまでは フォントを変えるのは乗り気じゃありませんでした。
今回はどうしてもフォントを変えてみたくなって 変える方法を調べてみました。
Google Fontsを紹介しているサイトが有ったので 試してみました。
試してみた結果 簡単にフォントを変える事が出来たので その方法を紹介します。
まずGoogle Fontsのページを開いて 使いたいフォントを選択します。フォントを選択する前に 画面左上の方にある言語設定で 日本語（Japanese）を選択しておくと 日本語フォントが選べます。
フォントの一覧の中から使用したいフォントが見つかったら そのフォントをクリックして そのフォントのページを開いてください。 そのフォントのサンプル文字列が表示されています。（太さの違うサンプル文字列が複数 縦に並んでる場合もあります。）サンプル文字列の右側に +select this style のリンクボタンが有るので 使用したいフォントのリンクボタンをクリックしてください。
ページの右側に そのフォントをWebで使用する方法が表示されます。。
まずページのHeader部に以下のように フォントを読み込む為の構文を記述します。
<style>
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500&display=swap');
</style>後はページ中の使いたいタグで下のように フォントを指定します。
font-family: 'Shippori Mincho B1', serif;当サイトのPukiwikiで実際に組み込んだ方法は skin/pukiwiki.skin.phpを開いて <head>タグから </head>タグまでの間に下のように記述ました。
<style type="text/css">
<!--
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500&display=swap');
h1 { font-family: 'Zen Antique', serif;
}
-->
</style>実際のページの反応は 下のイメージのように ページのトップの見出しだけ 明朝体にすることが出来ました。この方法だと ページを開く時にGoogle fontを読み込むので 機種依存の問題はありません。 たぶん…（汗
フォント変更前
フォント変更後