先日ご紹介したWelcart対応テーマ『Blanc』ですが、ウチが手を入れたトコロ少しずつご紹介でも。
全然バイク乗れてないので毎度ながら仕事ネタでスイマセンm(uu)m
Welcart対応テーマ『Blanc』 Google Fontsの変更＆導入
Welcart カスタマイズ ブログで配布頂いたWelcart対応テーマ『Blanc』にはGoogle Fontsが読み込まれています。僕はGoogle Fonts大好きなので真っ先に活用しました。
デフォルトの状態では『Quicksand』が読み込まれていますね。可愛い書体で女性ならではで、きっと素敵な作者様だと勝手に想像させて頂きましたw
ですが、ウチはメンズショップでやや固めの印象もあるので正統派な書体・・・と言うか単なる僕の好みへ変更＆追加です。
↑はキャプったので画像ですが、本当は中の文字はフォントでそこがwebフォントです。
Google Fontsの読み込み
Google Fontsの記述があるのはfunctions.phpの90行目くらい。ウチは少し加えた文があるのでその前後だと思います。
せっかくfunctions.phpに書いてくれているのですから、ヘッダーに直接書く必要は無いです。
Google Fontsから選ぶ
Google FontsはGoogleが公開してくれているwebフォントなワケですが、そこから好きなフォント選んで記述すればすぐに使えます。
Google Fontsはココ＞＞https://www.google.com/fonts
上記サイトから好きな書体を選らんで、先ほどのfunctions.phpの1文に変更or追加
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=****|*****|*****');
って感じ。
＊＊＊＊＊←の部分にフォントの名前。
僕みたいに複数読み込ませる時は|で区切ります。
コレでは準備は完了なので、後は使いたい場所のfont-familyを指定してあげればOK。
とても簡単です。
余談
僕の周りはアナログな人ばかりで、僕も本来はそっち側のワケですが、友人達からはウチで使っている文字は画像だと思われていたようです。画像で読ませているトコロありますが、最近作っているサイトはほとんどをフォントで読み込ませています。そっちのほうが色々と都合が良いので。
ちなみにFABのページのテンプレも新しくしたのですが、そっちで使ってる筆記体も当然フォントです。あとスリーレッグスのヤツもね。
こんな感じで色々遊べるからWEBフォント大好きです。
ついでに影の落とし込みや、透過具合はCSSで調整できるので画像で作ったっぽく見せられます。
本当はもっと凝った文字の読み込みをやろうと思ったのですが難しいし面倒なので、ひとまずやめました。そのうち無駄に凝るかも知れません。
ここのトコロ書いてる事が分からないよ って仲良いお客さん達から言われてしまっておりますが、少しの間このネタで更新引張ります。他にネタ無いんで・・・
VESPAでも参加させてくれるツーリングがあればバイク乗ってバイクネタ書くのですが・・・。WRは相変わらず検切れでスイマセン。
ではでは