【変換不要】日本語WEBフォントがすぐ使用できる配布サイト3選

こんにちは、hgmです。

今回は日本語のWEBフォントを面倒な変換不要ですぐ使うことができる、CDN配布サイトを3つご紹介！

サイトの軽量化になるので、配布サイトにあるフォントを事前に調べてからデザインしましょう。

Google Fonts

WEB制作には欠かせないGoogle公式のWEBフォントサービス。

8種類の明朝体、角ゴシック、丸ゴシックが使用できます。

Google Fonts

 

72 Users

40415 Pockets

Google Fonts

https://fonts.google.com/?subset=japanese

Making the web more beautiful, fast, and open through great typography

設置方法

フォント選択後スタイルを選択し、右側のボックスでlinkタグとCSSルールをコピペするだけでOK！

Google Fontsの日本語フォントについては、下記のブログで詳しく紹介しています 🙂

ゆにメモ

 

4 Pockets

Google Fontsに追加された日本語フォントが魅力的すぎる！

https://blog.universe-web.jp/387

こんばんは！社員Aです👩最近圧力鍋を手に入れ、カレーを作ったのですが、豚肉も野菜もとろっとろの某カレー店のような味わいになったので、圧力鍋の凄さを痛感しています。圧力鍋があれば、帰宅後でもすぐに煮物が作れたりご飯が炊けたりするのでとても重宝しています。 さて、本日はGoogleFontsにひっそりと日本語フォントが出ていましたので、ご紹介していきます！早期アクセスだけでなく、正式に日本語WEBフォントが登場！いままでは、Google早期アクセスで「Notosans」や「はんなり明朝」などのWEBフォントが使えてい...

Google Fonts + 日本語

先程紹介したGoogle Fontsと被っているフォントもありますが、異なるサイトです。

公式には無い「はんなり明朝」、「こころ明朝」、「ニコモジ」、「ニクキュウ」があります。
ただし早期アクセスで試験的に配布されているものなので、ひらがな・カタカナ表記のみとなり、注意が必要です。

Google Fonts

 

2 Tweets

933 Users

1108 Pockets

Google Fonts + 日本語 • Google Fonts + Japanese

https://googlefonts.github.io/japanese/

As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available from Google Fonts.

設置方法

各フォントにジャンプし、右下のlinkタグとCSSルールをコピペするだけでOK！

Leafscape

フリーフォントを配布しているサイトです。

様々なタイプの日本語WEBフォントがあるので、表現の幅がかなり広がりますね！

leafscape.be

 

8 Users

8 Pockets

Leafscape

https://leafscape.be

設置方法

メニューの「Fonts」からフォントの検索が可能です。

使用する場合は、「コード取得」ボタンを押すと詳細ページに飛ぶので、ページ下にあるfont-faceをコピペします。
その後、HTMLのstyle属性を使用してfont-familyの指定をするか、CSSでルールをセットします。

<!-- HTMLの場合 -->
<h1 style="font-family: 東青梅ゴシック;">SAMPLE TEXT</h1>

<style>
/* CSSの場合 */
h1 {
    font-family: 東青梅ゴシック;
}
</style>

最後まで見ていただきありがとうございます;)

▼こちらの記事もおすすめです▼

ゆにメモ

 

1 Pocket

日本語のフリーフォントを一括で試すことができる「ためしがき」

https://blog.universe-web.jp/4146

おはようございます！社員Aです👩今回はWEB上で日本語のフリーフォントを試すことができる「ためしがき」をご紹介したいと思います。 日本語のフリーフォントを試すことができる「ためしがき」「ためしがき」は、商用利用可能な日本語のフリーフォントをお好きな言葉・文章で試すことができるWebサイトです。トップ画面にある入力欄にお好きな言葉・文章を入力すると、フリーフォントで表示した結果を閲覧することが出来ます。表示されたフォントをタップして表示された画面から各フォントの配布元へ遷移することもでき、...

ゆにメモ

ローカルにインストールされているフォントをWEBフォントとして使う方法【簡単】

https://blog.universe-web.jp/3900

おはようございます！社員Aです👩今回は、ローカルにインストールされているフォントをWEBフォントとして使う方法をご紹介したいと思います。以前の記事で、簡単に導入できるGoogle Fontsをご紹介しましたが、デザイン上ローカルにインストールされているフォントをWEBフォントとして使いたい場合もあると思います。今回はそんなときの対応方法について説明していきます！ Webフォントを使用可能にする@font-faceローカルにインストールされているフォントをWEBフォントとして使用可能にするには、CSSの＠font-faceを使用...