Google Fontsの日本語フォントを実装してみる

GoogleFonts+日本語早期アクセスというのをサイトに実装してみたいと思います。

使い方はGoogle Fontsと同じ。

  1. 使いたいフォントを選ぶ。
  2. htmlのHead内にlinkを追加しCSSを読み込む。もしくはCSSに@importを追加する。
    <link href="https://fonts.googleapis.com/earlyaccess/****.css" rel="stylesheet" />
    
    @import url(https://fonts.googleapis.com/earlyaccess/****.css);
  3. CSSのfont-familyにフォント名を追加する。
    .wf-roundedmplus1c { font-family: "フォント名"; }

 

ページ内の右下にあります。

 

 

フォントの種類

フォントの種類は合計で9種類あります。

  • M+ 1p
  • Rounded M+ 1c 
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

 

実際に使ってみる

上は遊ゴシックの今まで使っていたスタイルです。

ここから色々なGoogle日本語Fontsを試していきたいと思います。

 

M+ 1p 

最初は、M+1pというフォント。

 

【PC表示】

とても読みやすく、癖が少ないフォントですね。

 

【Ipod表示】

Ipodn画面の大きさでは、あまり見た目は変わらないかも

 

【android表示】

 

携帯の画面では、圧縮されて見えてるのでもう若干違和感が感じられます。

Suriko

旅や面白い所、不思議な所、絶景な所、ラーメンが好き。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です