以外と簡単?WordPressでウェブフォントを使う

とあるサイトの制作でウェブフォントを使ったので今日はその手順について。
以外と簡単であっさり設定できます(^ ^)。
最近は商用利用可能なフリーのウェブフォントがけっこうあるのでみなさんも是非試してみて下さい。

フォントをテーマフォルダにアップロード

ぼくたちのゴシック(bokutachi.otf)を使わせて頂きましたm(_ _)m。
今回は子テーマのフォルダに「font」という名前のフォルダを作ってそこに[bokutachi.otf]をアップロードしています。

アップロード画面

CSSの適用

子テーマの[style.css]にこんな感じで追記します。

@font-face {
  font-family: "bokutachi";
  src: url("./font/bokutachi.otf") format("opentype");
}

例えばh3に指定するならこんな感じ

h3 {
    font-family: bokutachi;
}

Internet Explorer への対応

上記の記述だとChromeやSafariではちゃんと表示されますが、
IEだと表示されませんΣ(゚д゚lll)。
色々調べたところこんな感じの記述に修正しました。

@font-face {
  font-family: "bokutachi";
  src: url("./font/bokutachi.eot"); /* IE9 */
  src: url("./font/bokutachi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("./font/bokutachi.otf") format("opentype");
}

otfファイルからeotファイルへの変換にはこちらの「WOFFコンバーター」を使わせて頂きましたm(_ _)m。

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m

インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク