無料でWEBフォント版UDフォント 'みんなの文字'を導入する方法

こんにちはnasustです。UDフォントの話題がバズっていました。

それに便乗して無料でWEBフォント版、UDフォントを導入できる方法を解説します。

以下のサイトで会員登録して設置するだけです。

UCDAフォント みんなの文字 | UDフォントに科学的基準

会員登録すると設置方法をメールで送ってくるので、 その手順通りに行うだけで導入できます。

ただし注意点があります。日本語のWEBフォントなので約2.5Mbyteのファイルサイズがあります。

その対策としてfont-face用のcssを用意して、preloadで読み込みましょう。

ただし古いブラウザでpreloadはサポートされていないので、全てのブラウザで読み込めるように、 loadCSSを導入します。

preloadでWEBフォントを読み込む

下記のページのJavaScriptで古いブラウザでもpreload実現できます。

以下のHTMLをheadに設置します。

<link rel="preload" href="font-face.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="font-face.css"/></noscript>
html

以下のJavaScriptをpreloadするlinkの下に設置します。

<script>
/* loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(a){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){function e(){t.addEventListener?t.removeEventListener("load",e):t.attachEvent&&t.detachEvent("onload",e),t.setAttribute("onload",null),t.media=a}var a=t.media||"all";t.addEventListener?t.addEventListener("load",e):t.attachEvent&&t.attachEvent("onload",e),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(e,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);
</script>
javascript

cssのfont-faceは読み込まれる途中でも表示されるようにfont-display: swap;を記述します。

これでレンダリングブロックしないのでGoogleのPageSpeed Insightsの点数は余り下がりません。

PCで無料でUDフォントを使いたい場合

みんなの文字のPC版は有料です。無料で使用したい場合は、MORISAWA BIZ+フォントの無料版をダウンロードします。

一番下にスクロールするとダウンロードのリンクがあります。会員登録が必要です。

閲覧中のサイトのフォントをUDフォントにする

Google Chromeの拡張で、サイトにカスタムスタイルシートを適用できます。

私はTwitter Liteのページに以下のスタイルシートを適用して、読み飛ばしを防止しています。

.r-gwet1z{
    font-family: "BIZ UDPゴシック", BIZ-UDPGothic !important;
}
css

最後に

私は、視力が弱い以外問題の無い目ですが、 UDフォントにすると読みやすく、文章の内容が覚えやすくなりました。

OSのフォントもUDフォントにしてほしいですね。会社で組織的に導入したら少しはコミュニケーションミスが減るかもしれないですね。

older