STORK19の追加CSSを利用してFONT PLUSのフォントを設定してみた

こんにちは、散花月です。

さて今回ですが前回の記事でも書いた通りブログのフォントを大きく変更しました！

2025.03.20

その上で少しだけ経緯をご説明すると、過去のHPでもそうなんですが私自身結構「フォント(文字)」にはこだわりを持っています。
足跡の軌跡(WayBackMachineから参照。閲覧は自己責任でお願い致します)

が、少し時間が経ってブログでも同じ構成を…とは思わず(笑)面倒なのでひとまずPC側の設定に委ねて運営を行っていました。
ただ最近になってエックスサーバーの無料Webフォントサービスである「TypeSquare」を利用していたのですが、
エックスサーバーのTypeSquare

これだと自身が指定したいフォントがかなり限定されてしまっておりもどかしい気持ちになっていました。
そこで調査した結果発見したのが今回実装済みとしている「FONT PLUS」！
3800以上のWebフォントが使えてお値段10万PVまでなら月額1,100円という価格設定だったのでじゃあやってみるか、となった訳です。

FONT PLUSの会員登録、Webフォントのセッティングまで
ブログ側でのWebフォント設定について

FONT PLUSの会員登録、Webフォントのセッティングまで

では実際にFONT PLUSへ登録を行った手順を覚書として書いていこうと思うのですが、
とは言ってもログイン画面から右上の「新規登録」で会員登録を行えば完了となっています。
または無料トライアルプランでお試し実装も行えますが、
こちらは以下の制限となりますのでご注意を。
・複数サイトご利用可能で5000PV迄（有効期限6か月）
・使用フォントの制限あり

あとは有料会員の登録を行い、一括か月額支払いかを選んだ後は自身で使用したいフォントを探してMyフォントに追加すればOK。
ここら辺は手順含めてFONT PLUSのサイトに載っているのでご確認ください。
※2025/03/23現在、一括と月額両方とも料金は変わりません

テレワークにおすすめモバイルPC

ブログ側でのWebフォント設定について

FONT PLUSでの設定が完了したら次はブログ側での各フォントを設定していきます。
が、今回使用しているテーマ「STORK19」についてはタグ毎のフォント設定というカスタマイズ項目は存在していないため、
独自のカスタムCSSで対応を行いました。
具体的には以下の通り。
(font-familyの各フォントについては○○;としています)

select{
font-family: ○○;
}
#wp-calendar{
font-family: ○○;
}
.wp-calendar-nav{
font-family: ○○;
}
.text-logo-link{
font-family: ○○;
}
.inner-header{
font-family: ○○;
font-size:20px;
}
h2{
font-family: ○○;
}
h3{
font-family: ○○;
}
h4{
font-family: ○○;
}
h5{
font-family: ○○;
}
.card-overlay {
font-family: ○○;
}
.single-title{
font-family: ○○;
}
.entry-content{
font-family: ○○;
}
.entry-content a{
font-family: ○○;
text-underline-offset: 0.3ex;
}
.entry-content a:visited{
color:#4169E1;
}
/* もしも枠 */
/* 枠 */
div.easyLink-box{
margin: 0 auto !important;
padding: 1em 1.5em !important;
background-color: #fafafa!important;
border:none!important;
border-radius: 4px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
line-height: 1.5;
max-width:90%!important;
}
@media screen and (max-width: 703px){
div.easyLink-box {
text-align:center;
max-height:none!important;
padding: 10px!important;
}}
/* もしも文字化け対応 */
p.easyLink-info-name a {
font-family: ○○;
}
/* もしもボタン */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
font-family: ○○;
}
.entry-content strong{
font-family: ○○;
}
#calendar_wrap{
font-family: ○○;
}
.archive-title{
font-family: ○○;
}
.tptn_posts_daily{
font-family: ○○;
}
.arpw-random-post{
font-family: ○○;
}
.widget_recent_entries__ul{
font-family: ○○;
}
#cat{
font-family: ○○;
}
#archives-dropdown-2{
font-family: ○○;
}
.gt_selector{
font-family: ○○;
}
.textwidget{
font-family: ○○;
}
.author_meta.nowrap .author_info{
font-family: ○○;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

select{

font-family: ○○;

}

#wp-calendar{

font-family: ○○;

}

.wp-calendar-nav{

font-family: ○○;

}

.text-logo-link{

font-family: ○○;

}

.inner-header{

font-family: ○○;

font-size:20px;

}

h2{

font-family: ○○;

}

h3{

font-family: ○○;

}

h4{

font-family: ○○;

}

h5{

font-family: ○○;

}

.card-overlay {

font-family: ○○;

}

.single-title{

font-family: ○○;

}

.entry-content{

font-family: ○○;

}

.entry-content a{

font-family: ○○;

text-underline-offset: 0.3ex;

}

.entry-content a:visited{

color:#4169E1;

}

/* もしも枠 */

/* 枠 */

div.easyLink-box{

margin: 0 auto !important;

padding: 1em 1.5em !important;

background-color: #fafafa!important;

border:none!important;

border-radius: 4px;

box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);

line-height: 1.5;

max-width:90%!important;

}

@media screen and (max-width: 703px){

div.easyLink-box {

text-align:center;

max-height:none!important;

padding: 10px!important;

}}

/* もしも文字化け対応 */

p.easyLink-info-name a {

font-family: ○○;

}

/* もしもボタン */

div.easyLink-box div.easyLink-info p.easyLink-info-btn a {

font-family: ○○;

}

.entry-content strong{

font-family: ○○;

}

#calendar_wrap{

font-family: ○○;

}

.archive-title{

font-family: ○○;

}

.tptn_posts_daily{

font-family: ○○;

}

.arpw-random-post{

font-family: ○○;

}

.widget_recent_entries__ul{

font-family: ○○;

}

#cat{

font-family: ○○;

}

#archives-dropdown-2{

font-family: ○○;

}

.gt_selector{

font-family: ○○;

}

.textwidget{

font-family: ○○;

}

.author_meta.nowrap .author_info{

font-family: ○○;

}

国産WordPressテーマ「STORK19」

この中で結構大変だったのは「もしもアフィリエイトリンクの文字化け」対応。
フォントを切り替えた後でもしも用のリンク文字が化けてしまったために急遽対応したクラスのaタグに対して本文と同じ文字を当てています。
結果問題はなさそうなのでひとまずこの構成で行く予定です。

以上、FONT PLUSをSTORK19へ導入した覚書でした。
Webフォント全般に言えることですがは契約しただけではNGで自身でスタイルシート(CSS)を触れるようになっておく必要があるのは注意事項かなと思います。
ただ一度分かってしまうと後は3800以上のフォントから好き放題使えるので今後は色々と試してみる予定です！

Webフォントについては注意事項があり、「同一記事内かつ一意の文字で1000文字以内」となります。
こちらについては以下のサイトで詳細に書いているのですが、
文字数制限はありますか?

同じ文字はカウントしないが別の文字で「1000文字」という事ですね。
私の場合はChatGPTで都度「一意の文字数」をチェックして確認してます！

独自ドメインを複数お持ちの方にお勧めのレンタルサーバー！

それでは失礼いたしますm(_ _)m