読者です 読者をやめる 読者になる 読者になる

イロイロひとりごと。

ブログのこと、普段の生活のことをつぶやいています

ブログタイトルにWEBフォントを使っています

サイトデザイン・設定 はてなブログ

ブログテーマを決めた際、ブログタイトルのフォントが気に入らなくて、いろいろ考えた結果WEBフォントを使用することにしたんです。

 
覚書に記事にしておくつもりが、書きかけでそのままになっていました(;´д`)
 
 

困っているかたがいらしたので、微力ながら参考になれば…

と書きあげてみます(*´ω`*)

 

ひよっこブロガーで、HTMLとかCSSとかコピペで生きていますので、詳しいことはわからないのでそこんとこご容赦ください。

 

日本語WEBフリーフォント

検索すると結構でてきますが、素人には使い方がわからないモノが多かったです。
 
 
日本語ウェブフォント フリーフォントウェブフォントファン | ウェブフォントファン日本語ウェブフォント フリーフォントウェブフォントファン | ウェブフォントファン
 
 
その中でこちらがコードが書かれていて使えそうでした。
 
 


コチラの記事でも紹介されていて、参考にさせてもらいました。

 

WEBフォントの設定

 
デザイン設定のデザインCSSにコードを入れます。

 

f:id:setuyakuhappylife:20150304000926p:plain

 

 設定してから時間が経ってしまい細かいことは忘れてしまいましたが、当ブログにはCSSにこう記述してありました。

 

/* Webフォント */

@font-face
{
font-family: mplus-1c-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1c-regular.ttf')
format("truetype");
}

 

あとはここにWEBフォントを使いたいところ、

ブログタイトル、ブログ紹介文、記事タイトル、本文などを指定します(*uωu*)σ

 

#title
{
font-family: mplus-1c-regular;
font-size: 27px;
  margin:0 auto;
}

私はブログタイトルのみなのでこんな設定。

 

一度本文までWEBフォントにしてみたけれど、表示が遅すぎるので、やっぱりブログタイトルのみにとどめておくのがよさそうです。

 


タイトルとかのコードはこちらを参考にしました。

 

f:id:setuyakuhappylife:20150304005117p:plain

 

私はこんな感じでできましたが、どうでしょう?

詳しい方いたら変なとことか教えてほしいです(●・ω・)/

 

***追記***

やはりWEBフォントは表示が遅く、現在は使用していません。

こちらの記事で現在のフォント設定のことを書いています。

happylife-tsubuyaki.hatenablog.com