Web制作
【変換不要】日本語WEBフォントがすぐ使用できる配布サイト3選
2020年10月15日 8:00
こんにちは、hgmです。
今回は日本語のWEBフォントを面倒な変換不要ですぐ使うことができる、CDN配布サイトを3つご紹介！
サイトの軽量化になるので、配布サイトにあるフォントを事前に調べてからデザインしましょう。
Google Fonts
WEB制作には欠かせないGoogle公式のWEBフォントサービス。
8種類の明朝体、角ゴシック、丸ゴシックが使用できます。
設置方法
フォント選択後スタイルを選択し、右側のボックスでlinkタグとCSSルールをコピペするだけでOK！
Google Fontsの日本語フォントについては、下記のブログで詳しく紹介しています 🙂
Google Fonts + 日本語
先程紹介したGoogle Fontsと被っているフォントもありますが、異なるサイトです。
公式には無い「はんなり明朝」、「こころ明朝」、「ニコモジ」、「ニクキュウ」があります。
ただし早期アクセスで試験的に配布されているものなので、ひらがな・カタカナ表記のみとなり、注意が必要です。
設置方法
各フォントにジャンプし、右下のlinkタグとCSSルールをコピペするだけでOK！
Leafscape
フリーフォントを配布しているサイトです。
様々なタイプの日本語WEBフォントがあるので、表現の幅がかなり広がりますね！
設置方法
メニューの「Fonts」からフォントの検索が可能です。
使用する場合は、「コード取得」ボタンを押すと詳細ページに飛ぶので、ページ下にあるfont-faceをコピペします。
その後、HTMLのstyle属性を使用してfont-familyの指定をするか、CSSでルールをセットします。
<!-- HTMLの場合 -->
<h1 style="font-family: 東青梅ゴシック;">SAMPLE TEXT</h1>
<style>
/* CSSの場合 */
h1 {
font-family: 東青梅ゴシック;
}
</style>
最後まで見ていただきありがとうございます;)
▼こちらの記事もおすすめです▼
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
