Googleが、Noto SansというFontをOpen Source Licenseで配布を始めました。 Noto Sansの日本語/中国語簡体字版のFontをWeb Font化しようとしてハマった時の話と、最終的にWeb Font化した成果物をおいておきます。 Web Font化の全体の流れ & ハマりポイント ttfやotf形式のFontをWeb Font化するには、以下のような流れで処理します 1. 元のFont fileをDownloadする 2. FontをSubset化する 3. Web fontとして使える様に各種形式に変換する (一般的にはeot, ttf, woffの3つを用意しておけばOK) 4. cssでfont指定する が、ここでポイントなのが2です。 ご承知のように日本語や中国語などはFontのFile sizeがそもそも大きいです。例えば上記のNoto Sa
![Noto SansをWeb font化しようとした時にハマった話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ca53cfc64a6d983e1094d9e7e894f73cada2588/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Tm90byUyMFNhbnMlRTMlODIlOTJXZWIlMjBmb250JUU1JThDJTk2JUUzJTgxJTk3JUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJTlGJUU2JTk5JTgyJUUzJTgxJUFCJUUzJTgzJThGJUUzJTgzJTlFJUUzJTgxJUEzJUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hMTRmN2Q4ZjlhNWNkNGI3NzJmZmNmNDc4ZWZjMDZhMg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFrYTRzYXRvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01MjI4ZWY0NjJiZjU4MWIwNTJhMDNiNWYyM2QyNDY3Mg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D6ec12ee8b7055044eaf696528752306f)