Typesquareの無料プランでボールドが太字にならないからせめてマーカーみたいなのを引くようにした

たかのりうむです。

 

このまえ、モリサワのTypesquareに登録をして晴れてWebフォントを導入しました。

 

relaxaholic.hatenablog.com

 

この記事でも書いていたんですが、ボールドが反映されません、、、。調べてみると、モリサワのサイトにこんな記述ががありました。

 

 

 TypeSquareでは、html内でのbold指定や、 CSSによる「font-weight: bold」などのウエイト調整は、 自動的に解除されるため、反映しません。1書体に対し複数のウェイトが用意されており、
それらのフォントを指定することで、より細やかなウエイト調整を行っていただくことを実現しているためです。bold設定以上の美しいページを作成いただくために、ぜひご活用ください。

例:
「新ゴ」という書体 には、
EL / L / R / M / DB / B / H / U の8種類のウエイトがありますが、
書体によってウエイトの種類、数は異なります。

出典:詳細 | よくある質問 | Webフォント TypeSquare [タイプスクウェア]

 

 ・・・?要するに、太字には太字用のフォントを用意して、細やかに設定してね!ってこと??

つまり、ぼくのような無料プランだと、1フォントしか使えないから、太字は反映できませんってことですかそうですか。でも、諦めの悪いぼくは試しにデザインCSS

 

.entry-content strong {
font-weight:bold;
}

と書いてみましたが、反映されず。やはり。とは言え何かしら目立たせたい…。というわけで、マーカーを引くことにしました。デザインCSSに以下を追記。

 

.entry-content strong {
background: linear-gradient(transparent 60%, yellow 40%);
}

 

文字の部分に半透明の背景色をつけます。ぼくはブログに青色をたくさん使っているので、とりあえず色は黄色にしておきました。

 

こいつを記載しておくと、ほら、こんな風に文字の背景にマーカーで線を引いたみたいになるんですよ!

 

というわけで、太字にはできませんが着色はできたのでとりあえず良しとしましょう。

将来金持ちになったらフォントを買いまくって太字にしてやる。

 

以上です。