通販wish関連の記事はコチラ!

ワードプレスに新しいフォントを導入する方法

KUNJI

こんにちはKUNJIです!

ワードプレスでブログを始めて早1年5ヶ月目、ブログ始めてなかったら経験できなかったことを色々と経験できました。

1年5ヶ月経過してぼんやりとは感じていたのですが、まぁ気にする程ではなかったんですけど、それでもいまいちパッとしなくて・・・

何が?

ミィ

KUNJI

えっ?!その字って?
あぁ、これね!

ミィ

これはアニメ『けいおん』でもお馴染みの・・・

けいふぉんとです

 

そうです、気になっていたのは書体、フォントのことです!

気にしてない人は気にしていない、でもボクは気にしている人です、気になっているんだったらとことん追求しましょう。

 

なぜならこのブログタイトルどおり

KUNJIはとても知りたがりだからね!

新しいフォント【けいふぉんと】を導入してみよう!

善は急げ、さっそく導入の作業に移りましょう!

ちなみに下記はこのブログの環境です。

僕の環境
  • サーバーはロリポップ
  • PCはWindows
STEP.1
woffファイルに変換
フォントファイルをダウンロードすると拡張子.ttfのファイルがある。これをWOFFコンバータでwoffファイルとEOTファイルを作成する(【EOTファイルを作成する】にチェックするのを忘れずに!)

これで以下の2つのファイルができました

今回ボクはけいフォントを導入してみました!

  • keifont.eot
  • keifont.woff
STEP.2
fontフォルダー作成
ロリポップのFTPでfontフォルダーを下記の場所に作る(ちなみに下記はツリーです)

🗂wp-content🗂themes🗂sango-theme-poripu🗂font 

上記で作成したfontというフォルダーにstep1で変換したファイルを放り込む

STEP.3
cssを記述する
style-css
@font-face{ 
  font-family: 'keifont';
  src: url('http://ドメイン/wp-content/themes/子テーマを指定/font/keifont.woff') format('woff'),
url('http://ドメイン/wp-content/themes/子テーマを指定/font/keifont.eot') format('eot');
}
 
h1{
  font-family: 'keifont' !important;
  src: url('http://ドメイン/wp-content/themes/子テーマを指定/font/keifont.woff') format('woff'),
url('http://ドメイン/wp-content/themes/子テーマを指定/font/keifont.eot') format('eot');
}

赤字の部分は必要な方のみ使用して下さい!ちなみに上記のコードを記述するとタイトル(h1)がけいふぉんとになります

注意
h1の部分をbodyにするとワードプレス内が全てけいふぉんとに!!ご注意を!
STEP.4
使ってみよう!
使い方は下記のコードを記述すればOK!

HTMLコード
<span style="font-family: keifont;">けいふぉんと</span>

けいふぉんと

STEP.5
完成!
 

以上が新しいフォントを導入する手順です、FTPソフトでファイル内をいじるのでくれぐも注意して作業して下さい。

当ブログは何事が起こっても責任は負えません、作業は自己責任でお願いします。

スポンサーリンク

まとめ

ブログの記事はもちろん内容が大切ですがイメージも大切な要素です。

フォントを変えるだけでそのブログのイメージはガラッと変わります。

何かを変化させれば何かが変わるかも知れません。

イメージチェンジをしてみるのも良いかも知れませんね!

ここまで読んで頂きありがとうございます。