Skip to main content
GDN8 PATIO

ローカルフォントに応じたWebフォントの読み込み

Published
Kenta Toshikura

日本語のWebフォントは配信量が大きくなりやすいので読み込ませたいフォントがユーザーの環境にあるかどうかを判別したり日本語ページかどうかを判別して配信するのがおすすめです。

DEMO

フォントがあるかをチェックする方法

対象フォントを利用できるかは CSS Font Loading API のFontFaceで調べます。srcにlocal("フォント名")だけを渡しload()が成功するかで判定します。成功すればその名前のフォントをブラウザから利用できます。

async function hasLocalHiragino() {
	if( !( 'FontFace' in window ) ) return false;

	const font = new FontFace(
		'Local Hiragino',
		[
			'local("Hiragino Sans W3")',
			'local("HiraginoSans-W3")',
			'local("Hiragino Kaku Gothic ProN W3")',
			'local("HiraKakuProN-W3")'
		].join( ', ' )
	);

	return font.load().then(
		() => true,
		() => false
	);
}

この方法はフォントが端末に入っているかではなく指定した名前でページから使えるかを確認するものです。ブラウザ側の制限やフォント指定名の差異によってインストールされていてもfalse が返ることがあります。ただそうなったとしても用意していたWebフォントが通常通り読み込まれるだけなので表示上問題はありません。

可変フォントに関して

可変フォントの場合RegularやBoldが個別の名前を持たないことがあるのでFontFace.load()での判定はおすすめしません。ローカルフォントをブラウザから利用できるか確認するためのデモも用意しました。（フォントをインストールした直後はブラウザの再起動が必要になることがあります）

Adobe Fontsの例

次の例では日本語ページでヒラギノを利用できない場合だけtypekitのスクリプトを追加します。

const WebFont = {

	current: { lang: null },
	initialized: false,

	init() {
		this.current.lang = document.documentElement.lang.toLowerCase().split( '-' )[ 0 ];
		this.load();
	},

	async hasLocalHiragino() {
		if( !( 'FontFace' in window ) ) return false;
		const font = new FontFace(
			'Local Hiragino',
			[
				'local("Hiragino Sans W3")',
				'local("HiraginoSans-W3")',
				'local("Hiragino Kaku Gothic ProN W3")',
				'local("HiraKakuProN-W3")'
			].join( ', ' )
		);
		return font.load().then(
			() => true,
			() => false
		);
	},

	async load() {
		if( this.initialized ) return;
		if( this.current.lang !== 'ja' ) return;
		this.initialized = true;
		if( await this.hasLocalHiragino() ) return;

		const config = {
			kitId: '******',
			async: true,
			inactive: () => {
				console.error( 'Adobe Fonts could not be activated.' );
			}
		};
		const script = document.createElement( 'script' );
		script.src = `https://use.typekit.net/${ config.kitId }.js`;
		script.async = config.async;
		script.onload = () => {
			try {
				window.Typekit.load( config );
			} catch( error ) {
				console.error( error );
			}
		};
		script.onerror = () => {
			console.error( 'Adobe Fonts kit could not be loaded.' );
		};
		document.head.appendChild( script );
	}
};

WebFont.init();

initializedは同じ処理を重ねて実行しないためのフラグです。ヒラギノを利用できればそこで終了し利用できない場合だけAdobe Fontsを読み込みます。

Google Fontsの例

次の例はYomogi Regularです。利用できない場合はGoogle Fontsからウェイト400を読み込みます。

const WebFont = {
	current: { lang: null },
	initialized: false,

	init() {
		this.current.lang = document.documentElement.lang.toLowerCase().split( '-' )[ 0 ];
		this.load();
	},

	async hasLocalYomogi() {
		if( !( 'FontFace' in window ) ) return false;
		const font = new FontFace(
			'Local Yomogi',
			[
				'local("Yomogi Regular")',
				'local("Yomogi-Regular")'
			].join( ', ' )
		);
		return font.load().then(
			() => true,
			() => false
		);
	},

	async load() {
		if( this.initialized ) return;
		if( this.current.lang !== 'ja' ) return;

		this.initialized = true;

		if( await this.hasLocalYomogi() ) return;

		const connection = document.createElement( 'link' );
		const stylesheet = document.createElement( 'link' );
		connection.rel = 'preconnect';
		connection.href = 'https://fonts.gstatic.com';
		connection.crossOrigin = 'anonymous';
		stylesheet.rel = 'stylesheet';
		stylesheet.href = 'https://fonts.googleapis.com/css2?family=Yomogi&display=swap';
		stylesheet.onerror = () => {
			console.error( 'Google Fonts stylesheet could not be loaded.' );
		};
		document.head.appendChild( connection );
		document.head.appendChild( stylesheet );
	}
};

WebFont.init();

判定がfalseの場合は通常どおりGoogle Fontsを読み込みます。

参考

  • ※ 記載内容とコードは2026年7月17日時点の公式ドキュメントを基準にしています。