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

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

ぼくたちのゴシック（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。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

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

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ