賢威8のフォントをカスタマイズする方法

賢威8のフォントと見出しをカスタマイズする方法

賢威8のフォントをカスタマイズする方法

賢威8のデフォルトのフォント設定では、以下の画像のように文字が表示されます。

これはこれで綺麗に見えているので問題ないのですが、独自のフォントを設定したい方もおられるはずです。

【賢威８デフォルトのフォント】

デフォルトのフォント

【変更後のフォント】

フォント指定

フォント設定は以下のセレクタで指定してください。

上記の【変更後のフォント】例では、以下のfont-familyを指定します。

ここに自分の好きなフォントを入力してください。

body, input, textarea {
    font-family: Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;
}

文字色、フォントサイズ、文字間、行間、改行の行間、の指定

body {
    color: #333333;
}
body, input, textarea {
    font-family: Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;
}
/*行間*/
.keni-main {
    letter-spacing: .05em;
    font-size: 1.7rem;
    line-height: 2.0em;
}
/*改行したときの行間*/
.article-body p {
    margin-bottom: 0.3em;
}

2行目：

文字色は、「body」セレクターに「color」プロパティで指定します。

デフォルト値は「#505050」なので、

例ではもう少し濃い黒色「#333333」を指定しています。

10行目：

文字サイズは、「.keni-main」セレクターに「font-size」プロパティで指定します。

デフォルト値は「1.6rem」（16px）なので、

例ではもう少し大きいサイズ「1.7rem」（17px）を指定しています。

（1.8remを指定すれば18px、1.9remを指定すれば19pxになります）

9行目：

文字間は、「.keni-main」セレクターに「letter-spacing」プロパティで指定します。

デフォルト値は「.025em」なので、文字と文字の左右の間隔が少し狭く感じます。