WING お知らせ

WordPressの文字をWebフォントで可愛くする方法

2018年8月18日

Googleで提供されているWebフォント「Rounded M+ 1c」を使用してサイトのフォントを可愛くするカスタマイズを紹介します。

サンプル

こんな風に文字をかわいく

フォント変えるだけで印象がガラッとやわらかくなりますね。

これはダミーのテキストだよ。文字がかわると印象が変わるね。女性のブログや見出しだけに使うのもポイントかも!

まるもじもより可愛い

これはダミーのテキストだよABCDEF123456!?

かわいいバナー

こんなバナーも作れるね

ステ子
次回のUPDATEでもう少し簡単に使用できるように考えていますがとりあえず

WordPressの文字をWebフォントで可愛くする方法

主な流れは

  1. WebフォントのCSSを読みこむ
  2. CSSで指定する

の2つだけです。

WebフォントのCSSを読みこむ

サイトで記載されている①のコード

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

サイトのheadに記載します。

WINGの場合は「テーマ管理」>「その他」>「コードの出力」>headに出力するコードに記述すればOKです。

CSSで指定する

次に反映させたいフォントをCSSで指定します。

サイト全体のフォントに使用したい場合は「外観」>「テーマの編集」>「style.css」のfontfamily

"Rounded Mplus 1c",

を以下のように追加します。

body {
  font-family:"Rounded Mplus 1c";
}

参考WINGでの設定方法はコチラ

見出しなど部分的に使用したい場合

部分的に使用したい場合は以下をCSSに記述

.wf-roundedmplus1c,
.wf-roundedmplus1c *{ font-family: "Rounded Mplus 1c"; }

適応させたい見出しなどにクラスを記載します

<h2 class="wf-roundedmplus1c">これはh2タグのかわいいフォント</h2>

技あり!

以下のようなCSSの記述にすると会話の吹き出しだけのフォントに使用できます。

.st-kaiwa-hukidashi { font-family: "Rounded Mplus 1c"; }
アザらん
より会話がアナログになって雰囲気がでる気がするわ
コン太
ホントだね!

注意ポイント

WINGの場合、上記のチェックの無効化及び「使用しない」を選択しておいてください。(※上記が優先されます)

その他の日本語フォント

用意されている他のGoogleの日本語フォントでも同様のやり方で使用できるかと思います。

ぜひ、お試しください。

https://googlefonts.github.io/japanese/

-WING, お知らせ

Copyright© AFFINGER(WING) , 2019 All Rights Reserved Powered by AFFINGER5.