*

大好きなガジェット、ゲーム、写真、映画、ブログ運営などの情報をお届けする、くねおのライフログブログ

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

      2015/10/16

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

 

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

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

PixelMplus(ピクセル・エムプラス)

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

20150703_pixelmplus01

 

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

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

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

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

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

修正したコードはこちら

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

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

 - ブログ運営 ,

スポンサーリンク


1番上へ