ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

トップ > HTML/CSS > 【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ＆ウェブフォント。

【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ＆ウェブフォント。

HTML/CSS etc

「font-weight: bold;」が効かない！どうしても文字を太字にしたい時の対処法

通常、CSSでテキストを太字にしたい時には、クラス等のプロパティで

「font-weight: bold;」

を指定し、そのクラスをテキストに適用します。

 

ただ、フォント自体がboldのウェイトに対応していなかったり、標準のウェイトが既に太字と変わらない状態だったりして、思うように文字の太さを調整出来ない時があります。

フォント指定は基本的に見ている方の端末内に存在するフォントに依存するので、こういった状況が懸念されます。

 

そんな「太字にならない時」に太字を適用させる対処法を今回、２つ紹介したいと思います。

ひとつは「text-shadow」を用いる方法。もうひとつは「ウェブフォント」を用いる方法です。

 

text-shadowで周囲に影をつけて無理やり太字化

まずひとつめ、文字の周りに全体的にテキストシャドウをかけて太字にする方法です。

text-shadowはカンマ区切りで複数影をつけられるので、 四方八方にずらした影をぼかし0で適用して、それによって文字を太く見せます。

 

CSS

.shadow-bold{
  text-shadow: 
    0.3px 0.3px 0, 
    0.3px -0.3px 0px,
    -0.3px 0.3px 0,
    -0.3px -0.3px 0px,
    0.3px 0px 0px,
    0px 0.3px 0px,
    -0.3px 0px 0px,
    0px -0.3px 0px;
  letter-spacing: 1px;
}

 font-weight : bold が効かないフォントを無理やり太字にする方法 | PisukeCode - Web開発まとめ

 

上記のクラスを以下のように太字にしたい部分に適用します。 

HTML

<span class="shadow-bold">太字にしたいテキスト</span>

 

このテキストシャドウを用いた手法は、元のフォントや閲覧する端末、拡大率によって多少がたついたり、綺麗に太字にならない場合もあるので注意が必要です。

色んな端末で確認しながら注意して使いましょう。

 

部分的に太字の存在するウェブフォントを使用する

こちらの方法はフォント自体を別のものに変えてしまう手法です。

元のフォントとなるべく近いフォントを使用して、違和感がなければ使える手法ではないかと思います。

 

Google Fontsで提供されている日本語の「Noto Sans JP」と「Noto Serif JP」を利用する場合のサンプルコードを記しておきます。

サンプルでは細いウェイト等も読み込んでるので適宜必要なものだけ読み込んでください。「wght@100;300;400;500;700;900」となっている部分の数字が使えるウェイトです。

 

まずはヘッドタグ内でウェブフォントを読み込みます。

HTML

<head>
/*〜省略〜*/
<link rel="preconnect" href="https://fonts.gstatic.com">
<!--ゴシック体系サンセリフ体、Noto Sans JP/-->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!--明朝体系セリフ体、Noto Serif JP/-->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
/*〜省略〜*/
</head>

もしくはCSS側の@importで以下を読み込み

CSS

/*ゴシック体系サンセリフ体、Noto Sans JP*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/*明朝体系セリフ体、Noto Serif JP*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

 

そしてクラスなどに以下のプロパティを適用します。

CSS

/*ゴシック体系サンセリフ体、Noto Sans JP*/
font-family: 'Noto Sans JP', sans-serif;

/*明朝体系セリフ体、Noto Serif JP*/
font-family: 'Noto Serif JP', serif;

 

あとは上記のプロパティを適用したクラスをHTML側で太字にしたい箇所に適用します。

HTML

<span class="webfont-bold">太字にしたいテキスト</span>

 Google Fonts

 

日本語フォントは容量が大きいのでサイトの読み込み速度に注意

ウェブフォントはフォントをダウンロードして表示するので見た目をなるべく統一させられるメリットがあります。ただし、ダウンロードするという特性上、容量がネックになります。

特に日本語フォントは、かな漢字カタカナ、種類が多すぎて容量がかなり大きくなります。

今後5Gの普及などで容量を気にしなくなる事を期待したいところですが、現状、利用する時は注意した方がよいでしょう。

 

サイト全体のフォント指定を見直すことも大切

いかがだったでしょうか。

今回紹介したテキストシャドウやウェブフォントはあくまでイレギュラーな対応方法だと思います。

元を正せばfont-weight: boldが効かないフォントを利用しているという事自体が問題の根幹です。なので、そのフォントをサイト全体に使用しているのなら見直した方がよいかもしれません。

 

2020年現在、よく使われている「游ゴシック」「ヒラギノ角ゴシック」などはちゃんとfont-weight: boldに対応しています。

こういったフォントの指定で対処出来ないか検討することも大事です。

 

個人的には現状のウェブの世界において、ある程度の表示の誤差は仕方ないと割り切るべしという考えではあります。

ただ、どうしても太字にしたいという場合に今回紹介したような方法を参考にしていただければと思います。

 

▼font-family含めサイト全体を見通してCSS設計を考えるのに参考になると思います。

 

▼美しいサンプルがたくさん掲載されているのでフォントも参考になると思います。一冊手元に置いておくのに非常におすすめです。 

 

 

ちなみに当ブログでは現在思い切ってウェイトの効かないウェブフォントを用いて、見た目重視で運用しています。。

 

最後までお読みいただきありがとうございました！ 

 

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp