Adobe Edge Web FontsでWordPressのフォントを変えてみる

広告:超オススメUnity Asset
  広告:超オススメUnity Asset

11月1日。新しい月になって、久々にこのMUSHIKAGO APPS MEMOをリニューアルしました。
せっかくなので、「Adobe Edge Web Fonts」を使って、このMUSHIKAGO APPS MEMOのブログタイトル部分を オシャレな感じに 特徴のあるフォントに変えてみようと思います。Adobe Edge Web Fonts、とりあえずどんなものか。

2012年9月24日に発表された Adobe Edgeツール&サービス。その仲間の「Adobe Edge Web Fonts」を試してみます。

このMUSHIKAGO APPS MEMOのブログタイトル部分をこんな感じ↓にしてみようと思います。
※このブログは、WordPress 3.4.2です。

といっても何かをインストールするわけではなく、
Adobe Edge Web Fonts
に行って、フォントを選んで、ソースをコピペするだけ。

※これらのフォントはアルファベット用ですのでご注意を。

フォントを選んで、ソースコードを取得

このサイト、ただのサービス紹介サイトではなく、便利なことにフォントのプレビューと、必要なソースコードを用意してくれます。任意のテキストを入力ボックスに書き込んで、プルダウンメニューからフォントを選んでみてください。

好きなフォントを選んだら、そこに表示された<script>と、例としてh1に適用されたスタイルをメモしておきます。

WordPressのCSSを書き換える

Google Chromeを使ってフォントを変えたいテキストを調べます。「要素を検証」を使って調べると楽です。

このテーマの場合、「#header h1」に取得したスタイルを適用してあげればいい事がわかります。

WordPressのサイト管理画面にログインして、「外観>テーマ編集>ヘッダー」で</head>のすぐ上あたりに、取得した<script>(JSへのリンク)をコピペします。

<script src="http://use.edgefonts.net/poiret-one.js"></script>

そして、「外観>CSS編集」から「CSSスタイルシートエディター」で、先ほど調べた「#header h1」に対して取得したスタイルを適用します。

#header h1 {
	font-family: poiret-one, serif;
	font-size: 36px;
	font-weight: inherit;
}

以上の簡単な手順で、ブログタイトル部分をEdge Web Fontsのサイトで選んだフォントで表示する事ができるようになったと思います。

コメント

  1. […] Adobe Edge Web FontsでWordPressのフォントを変えてみる | MUSHIKAGO APPS MEMO. […]