More than 5 years have passed since last update.

日本語が使える無料Web Fontsを使ってみる

webfont

Last updated at 2016-04-18Posted at 2014-12-25

どうやら、最近は日本語が使える無料Web Fontsがあるようなので、早速使ってみる。
好みの問題かもしれないけど、細いフォントってかっこいい。
日本語でも、タイポグラフィとか意識できる時代になるのかしら。

ただ、使ってみると、ちょっと遅いかな。

比較

Google Noto Sans Font Japanese(日本語版)

IPAフォント

M+ Fonts

IPAフォントをベースにつくられたフォント

NGT Font

IPAフォントをベースにつくられたフォント

bokutachi

サンプルコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Web Font</title>
    <style>
    /*Google Noto Sans Web Fonts*/
    @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
    #noto {
        font-family: 'Noto Sans Japanese', serif;
        font-weight: lighter;
    }

    /*IPAフォント*/
    @font-face {
        font-family: ipaexg;
        src: url('IPAexfont00301/ipaexg.ttf');
    }
    #ipaexg {
        font-family: ipaexg;
        font-weight: lighter;
    }

    /*mplus font*/
    @font-face {
        font-family: mplus-1p-light;
        src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf');
        format("truetype");
    }
    #mplus {
        font-family: mplus-1p-light;
        font-weight: lighter;
    }

    /*NGT Font*/
    @font-face {
        font-family: ngt;
        src: url('ngtmp/ngtmp.ttf');
    }
    #ngt {
        font-family: ngt;
        font-weight: lighter;
    }

    /*bokutachi*/
    @font-face {
        font-family: bokutachi;
        src: url('boku/bokutachi.otf');
    }
    #bokutachi {
        font-family: bokutachi;
        font-weight: lighter;
    }
    </style>
</head>

<body>
    <h1>Google Noto Sans Web Fontsを使ってみない。</h1>
    <h1 id="noto">Google Noto Sans Web Fontsを使ってみる。</h1>
    <hr>
    <h1>IPAフォントを使ってみない。</h1>
    <h1 id="ipaexg">IPAフォントを使ってみる。</h1>
    <hr>
    <h1>M+ Fontを使ってみない。</h1>
    <h1 id="mplus">M+ Fontを使ってみる。</h1>
    <hr>
    <h1>NGT Fontを使ってみない。</h1>
    <h1 id="ngt">NGT Fontを使ってみる。</h1>
    <hr>
    <h1>ぼくたちフォント（bokutachi）を使ってみない。</h1>
    <h1 id="bokutachi">ぼくたちフォント（bokutachi）を使ってみる。</h1>
</body>

</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up