フォント設定
基本フォント

テーマ管理の「全体設定」>「フォントの種類」にてサイト全体や見出しタグのフォントなどを変更できます。
基本 | 記事タイトル・見出しタグ(h2~5)・ウィジェットタイトル・バナー風ボックス・コメント・NEW ENTRY・関連記事 |
サイト名 | サイト名(モバイル・フッター含む) |
記事一覧タイトル | 記事一覧タイトル |
各メニュー(第一階層及びウィジェットボタン) | 各メニュー(第一階層及)・ヘッダーバナー・スマホミドル・スマホフッター・タグクラウド・カテゴリリンク・ウィジェットボタン |
各メニュー(第二階層以下) | 各メニュー(第二階層以下) |
おすすめ記事・ブログカード | おすすめ記事・ブログカード |
※利用OSにフォントがインストールされていない場合は反映されません
適応ID及びクラス
適応ID及びクラスを記載することで任意のテキストにも反映させることができます。
- 複数のクラスに適応する場合は「,(半角カンマ)」で区切ってください。
- 末尾の「,(半角カンマ)」は不要です
表示速度優先時は使用不可
様々なフォント設定例
Yahoo!ニュース
font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,'MS Pゴシック',MS PGothic,sans-serif;
note
font-family: YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif;
myBest
font-family: -apple-system,BlinkMacSystemFont,Roboto,arial,helvetica,Hiragino Kaku Gothic ProN,"ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;
文春オンライン
font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS ゴシック',sans-serif;
毎日キレイ
font-family: Helvetica Neue, Helvetica, Arial, Geneva, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", verdana, Osaka, "MS Pゴシック", "MS PGothic", Sans-Serif;
女子SPA
font-family: "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
当サイト
font-family: europa,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
その他
font-family:"Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
「その他(優先)」に記載して使用します。いいなと思うサイトがあったらどんなフォントを使っているのか見てみるのも良いですね。
Googleフォント

https://fonts.google.com/ にて任意のフォントの①「+」をクリックして出てきた②をクリック

①のhttpsで始まる「URLの部分のみ」と
②のfont-family:で始まる「全て」それぞれメモ
テーマ管理で設定

テーマ管理の「Googleフォント」にて
①に先ほどの「URL」、②に「fontfamily:~;」を記入して保存
fontfamilyは「;」まで全て記入
③反映箇所
従来のGoogleフォントとの設定範囲もより柔軟に使いやすいように基本に合せた設定範囲に変更致しました。
サイト名・コメント・NEW ENTRY・関連記事 | サイト名・NEW ENTRY・関連記事・コメント |
記事タイトル・見出しタグ・ウィジェットタイトル 他 | 記事タイトル・見出しタグ(h2~5)・ウィジェットタイトル・バナー風ボックス |
記事一覧タイトル | 記事一覧タイトル |
各メニュー(第一階層以下) | 各メニュー(第一階層以下)・ヘッダーバナー・スマホミドル・スマホフッター・タグクラウド・カテゴリリンク・ウィジェットボタン |
各メニュー(第二階層以下) | 各メニュー(第二階層以下) |
ブログカード・おすすめ記事タイトル | ブログカード・おすすめ記事タイトル |
SNSボタン | SNSボタン |
電話番号・任意記事のナンバー・Views(EX) | 電話番号・任意記事のナンバー・Views(EX) |
※「基本」の方で指定している箇所はそちらが優先されるので!importantを付与するか、上記を無効化して下さい。
-
-
数字だけフォントを変える(Google Fonts) #HTML - Qiita
数字だけフォントを変えたい時、Google Fontsだと簡単にできます。Google Fontsh ...
qiita.com
適応ID及びクラス
適応ID及びクラスを記載することで任意のテキストにも反映させることができます。
複数のクラスに適応する場合は「,(半角カンマ)」で区切ってください。
※末尾の「,(半角カンマ)」は不要です
設定するフォントの種類によってはリストの並びにズレが生じたり、太字設定などが反映されないなどの不具合が生じる場合がございます。