【Ligature Symbols】webフォントが反映されない時にチェックすべき３つの項目
WordPressでLigature Symbolsなどのwebフォントを使いたいと思い、説明されている通りに設定したのになぜか思うように反映されない、表示されないと困っているあなた。というか僕も初歩的なミスで何時間も悩んだので解決した方法を書いておこうと思う(´・ω・`)
Ligature Symbolsの使い方
まずは簡単にウェブフォントの使い方。
- webフォントのファイルをサーバーにアップロードする
- cssスタイルシートにそのファイルにアクセスするための記述をする
- 使う
という流れになり、このどこかで何かたった一つを間違えるだけで思うように反映されない。なんか文字化けした四角→「□」こんなのが表示されたりはするんだけどね(´・ω・`)
webフォントのファイルをサーバーにアップロードする
まずLigature Symbolsからファイルをダウンロードしてzipを解凍。すると中にゴチャゴチャ入ってるけど、使用するのは以下の５つのファイルだけ。
- LigatureSymbols-2.11.eot
- LigatureSymbols-2.11.otf
- LigatureSymbols-2.11.svg
- LigatureSymbols-2.11.ttf
- LigatureSymbols-2.11.woff
そしてこの５つのファイルをアップロードするんだけど、サーバーのどの階層にアップロードするかで変わってくるので注意。というかよく分からない場合は以下の通りにしてみると間違いないだろう。
ファイルを置く階層
まずはファイルマネージャでもFTPソフトでもなんでもいいからとりあえず今ワードプレスで使用しているテーマの階層まで行く。子テーマ使ってるんだったら子テーマの階層、使ってないんだったらそのまま「twentysixteen」など自分が使用しているテーマの階層。
するとそのテーマを構成しているphpファイルがすでにあると思う。そこに「fonts」(名前はなんでもいいんだけど)などのフォルダーを作成する。
こんな感じだ。
そしてその「fonts」フォルダーの中にさきほどの５つのLigature Symbolsのファイルを入れるだけでOK。
cssスタイルシートにそのファイルにアクセスするための記述をする
これが結構ややこしい。だけど上記の通り「fonts」という名前でフォルダー作ってそこに５つのファイルを入れたなら、以下のコードを自分のテーマのスタイルシート(style.css)にそのままコピペしたらいい。
[css]
/* Ligature Symbols */@font-face {
font-family: 'LigatureSymbols’;
src: url('./fonts/LigatureSymbols-2.11.eot’);
src: url('./fonts/LigatureSymbols-2.11.eot?#iefix’) format('embedded-opentype’),
url('./fonts/LigatureSymbols-2.11.woff’) format('woff’),
url('./fonts/LigatureSymbols-2.11.ttf’) format('truetype’),
url('./fonts/LigatureSymbols-2.11.svg#LigatureSymbols’) format('svg’);
src: url('./fonts/LigatureSymbols-2.11.ttf’) format('truetype’);
font-weight: normal;
font-style: normal;
}.lsf, .lsf-icon:before {
font-family: 'LigatureSymbols’;
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}.lsf-icon:before {
content:attr(title);
margin-right:0.3em;
font-size:130%;
}.lsf-icon.amazon:before {
content: '\E007’;
}
[/css]
ポイントは5行目から１０行目にある「url('./fonts/LigatureSymbols-2.11.eot’)」という記述だ。
これは「パス」といって、「ファイルをこのurlの場所から読み込みましょう」という記述なんだけど、urlの指定方法は初心者にとってはよく分からない部分だと思う。とにかく今回は何も考えずにコピペでいいんだけど、もしパスについてちゃんと理解したかったら「絶対パス 相対パス」でググってね。
とりあえずここが最初の難関で、このパス指定が上手く行ってないせいでウェブフォントが反映されないと嘆いているワードプレスwebフォント初心者は多いだろう。
使う
設定は以上なんだけど、実際に使うときにミスっていることもある。僕は今回このパターンで数時間悩むという凡ミスをした(´・ω・`)
記事の中で使うのは簡単だ。以下のように書けば、
[css]<span class="lsf-icon" title="twitter">Twitter</span>[/css]
↓
と表示される。アイコンは公式ページにある一覧表を見て指定することができる。
cssで指定して使う
もう一つの使い方として、テーマのテンプレートにあるものをcssでクラス指定して表示させる方法がある。例えばブログのカテゴリーの文字の前にウェブフォントのアイコンを表示させたいときなどだ。
カテゴリーの一つひとつにはクラスが付与されていることが多い。このブログで言うと「cat-item-1」といった具合に、カテゴリー一つひとつに番号が振られる。そこでカテゴリーの文字の前にアイコンを表示させるなら、この場合よく使われるのが「:before」などの「疑似クラス」だ。
[css]cat-item-1:before {～スタイル指定～}
cat-item-2:before {～スタイル指定～}[/css]
と自分のテーマのcss、スタイルシートに記述することで、それぞれのカテゴリーに別々のスタイルを指定できる。
例えばあるカテゴリーの前に王冠のアイコン「」を表示させる場合は以下のように記述する。
[css]cat-item-1:before {
font-family: 'LigatureSymbols’;
content: '\E03a’;
}[/css]
こうすればサイドバーにあるカテゴリーの前に王冠がつく。
みたいな。
ちなみに上記css内の「’\E03a’」が王冠の番号なんだけど、こうして「content」で指定した番号のアイコンが表示されるというわけだ。番号は公式ページの一覧表で確認。
僕が間違えていた箇所
以上でLigature Symbolsが表示されるはずなんだけど、僕はこの「font-family」の指定が抜けていたことで全然ウェブフォントが反映されなかった(´・ω・`)
だけどどこが間違っているのかが分からず、ファイルをアップロードする階層を見直してみたり相対パスの指定間違いがないか確認したり、とにかく遠回りした。だからもしかしたらそんな僕と同じ凡ミスをしている人が他にもいるかもしれないと思ってこの記事を書いた(´・ω・`)
変に以前このウェブフォントを使ってたから「contentで番号で指定してー、…？あれ？表示されない？なんで反映されないんだ？」というようにハマった。初心忘れるべからず(´・ω・`)
以上、Ligature Symbolsなどwebフォントが反映されないときの対処法でした。