8bitゲーム機風のWebフォントをstyle.cssに記述してブログに反映させる

8bitゲーム機風のWebフォントを見つけたので使ってみる。
ファミコン世代のゲーマーには堪りませんなあ。

フォントファイルのダウンロード

以下のページのダウンロードをクリックしてzipファイルをダウンロードする。

PixelMplus（ピクセル・エムプラス）

解凍すると4種類のフォントファイルが出てくるので、
お好みのものをFFFTPでサーバーにアップロードする。
子テーマフォルダ内に"font"フォルダを作って、その中に入れる。

style.cssに記述してフォントファイルを読み込ませる

style.cssに以下のコードを記述する。
"@import url()"の直後が良い。

/* Webフォント読み込み */
@font-face {
	font-family: PixelMplus10-Regular;
	src: url('https://kuneoresearch.com/wp-content/themes/stinger5verkuneo/font/PixelMplus10-Regular.ttf') format("truetype");
}

これで"子テーマフォルダ/fontフォルダ/フォントファイル"を読み込んでくれる。
あとは適用させたい要素に以下のコードを記述する。

font-family: PixelMplus10-Regular;

僕の場合は、以下の箇所を修正した。

・サイトタイトル
・キャッチフレーズ
・ナビゲーションメニュー
・サイドバーの見出し
・フッターのコピーライト

修正したコードはこちら

/* テキストをPixelMplus10-Regularに */
header .sitename {
	font-size: 26px;
	font-family: PixelMplus10-Regular;
}
header .sitename a {
	font-family: PixelMplus10-Regular;
}
header .sitename a:hover {
	font-family: PixelMplus10-Regular;
}
header .descr {
	font-size: 14px;
 	font-family: PixelMplus10-Regular;
}
#side aside h4 {
	font-family: PixelMplus10-Regular;
}
nav li {
	font-family: PixelMplus10-Regular;
	font-weight: bold;
}
nav li a {
	font-family: PixelMplus10-Regular;
	font-weight: bold;
}
nav li a:hover {
	font-family: PixelMplus10-Regular;
	font-weight: bold;
	text-decoration: none;
}
#footer h3, #footer .copy {
	font-family: PixelMplus10-Regular;
}
footer .descr {
	font-size: 14px;
	color: #666;
	font-family: PixelMplus10-Regular;
}

修正が完了したら、style.cssを保存してアップロード、サイトに反映されたか確認する。

良く言えばレトロ、悪く言えばチープな感じが良い感じ！
＊感じ方には個人差、世代差があります。