[無料WordPressテーマ] Twenty NineteenでFont Awesomeが文字化けする件

WordPress 5.0でデフォルトテーマとしてリリースされたTwenty Nineteenですが、Font Awesomeが巧く表示されない事がわかったので、当エントリーではその対応方法を書いてみたいと思います。
と言いつつ、日本人であまりこのテーマを使ってみようって人はそうはいないような気もするので、需要があるかって話なんですけどね…どう見ても全体的にフォントサイズのバランスが悪いですし、ちゃんと直そうとすると結構面倒ですよコレ?いやマジで。
原因はサイト全体のフォント指定
これがTwenty Nineteenのフォント指定の部分なんですが
html[lang="ja"] .site * {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
}
lang="ja"って一応は日本語を意識しててこれでしたかって感じですけど…とりあえずこの並びだと一般的なPCではMeiryo(メイリオ)で表示される事になるかと思います。
それよりhtmlタグでサイト全体に!important指定ってちょっと乱暴じゃないですかね?このせいでFont Awesomeが表示されなくなってるわけですが。はじめからそういった外部フォント的なものを使う事を想定してないとは言え、さすがにこれはどうなのかなと思わなくもないです。
Font Awesomeが表示されない
このTwenty NineteenはそもそもFont Awesomeを使用していないので、自前で実装するかプラグインなどを利用してFont Awesome用のCSSを読み込んでいる事が前提になりますが、先ほどのサイト全体のフォント指定が有効になってしまうせいで、文中にiタグやCSSで埋め込んだFont Awesomeのアイコンがいわゆる豆腐化してしまうようです。
こちらはテスト用サイトで確認した修正前後の画像になります。
ホームアイコンと書かれた部分の前がiタグで埋め込んだFont Awesomeのアイコンで、ソーシャルボタンはプラグインのVK All in One Expansion Unit(以降、VK ExUnitと略)を利用して挿入したものです。
Twenty NineteenのFont Awesome対応
本文中のiタグはこんな感じで何とかなるかと思います。
html[lang="ja"] i[class^="fa"] {
font-family: "Font Awesome 5 Free" !important;
}
以下のような基本的なフォーマットのみ確認してますので、あまり凝った書き方だとうまくいかないかもしれません。その場合はそれに合わせて適当に修正してみて下さいね?
<i class="fas fa-xxxx"></i>
VK ExUnitのソーシャルボタン対応
このくらい機能がシンプル…と言うかぶっちゃけ何も無いテーマだとVK ExUnitのように多機能なプラグインが非常に便利ですが、このVK ExUnitのソーシャルボタンもFont Awesomeのアイコンが表示されなくなっていたので、ついでと言っては何ですが表示されるようにしてみました。
html[lang="ja"] [class*="vk_icon_w_r_sns"] {
font-family: vk_sns !important;
}
または
[class*="vk_icon_w_r_sns"]::before {
font-family: vk_sns;
}
とりあえず気がついた部分だけ対応してみましたが、他のウィジェットなども対応が必要な部分があるかもしれません。と言うか、Font Awesomeを使っているウィジェットは他にもあったはずなので当然必要になるかと思われます…
シンプルだが難しいテーマ
このTwenty Nineteen、現時点では最もGutenbergに対応したテーマなのかもしれませんが、そのまま使うには何かと物足りず、かと言ってカスタマイズするには色々と面倒な感じなので、ぶっちゃけ自分では使おうと思わないかな…というのが正直なところです。
国産の無料テーマがあまりにも至れり尽くせりなので、一旦それに慣れてしまうと公式のWordPressテーマはちょっと厳しいという事もあるかもしれませんけどね?
ディスカッション
コメント一覧
まだ、コメントがありません