ウェブサイトでフォントが入れ替えられたら？

いきなりですが、こんなことをお伺いしました。

ウェブサイトでフォントが入れ替えられたら？

別にアクセシビリティーが向上するわけではないのかもしれませんが、
見やすくなると助かる、親切だという意見が多いようです。

ブラウザの設定で確かに入れ替えられますが、
能動的にウェブサイトにフォント切り替え機能を実装してみます。

実装サイト

右上あたりにある、設定（歯車）アイコンを開いてみてください。ただしTOPページですと少し下にスクロールしないと動作しないようになっています。

style.scss

body.sans-serif {
	html, body, div, p, a {
		font-family: 
			"BIZ UDPGothic",
			"Hiragino Sans", "Hiragino Kaku Gothic ProN",
			"Meiryo",
			-apple-system, BlinkMacSystemFont,
			"Noto Sans CJK JP", "Noto Sans Japanese",
			"MS PGothic",
			sans-serif;
	}
}

body.serif {
	html, body, div, p, a {
		font-family: 
			"YuMincho", "Hiragino Kaku Gothic ProN",
			"Noto Serif JP",
			"MS PMincho",
			serif
			!important;
	}
}

body.Hachi-Maru-Pop {
	* {
		font-family: 
			"Hachi Maru Pop"
			!important;
	}
}

body.DotGothic16 {
	* {
		font-family: 
			"DotGothic16"
			!important;
	}
}

script.js

/* 足りない変数、関数は補完してください */
$(function() {
	const cookieSettingFontFamilyName="FontFamily";
	mqlfont(cookie(cookieSettingFontFamily));

	/* フォントの設定のデフォルト起動 */
	function mqlfont(cook) {
		/* font list */
		/* https://photoshopvip.net/131206 */
		_body.removeClass('sans-serif');
		_body.removeClass('serif');
		_body.removeClass('Hachi-Maru-Pop');
		_body.removeClass('DotGothic16');

		if(cook === undefined || cook == "" || cook == "default")
			_body.addClass('sans-serif');
		else if(cook == 'serif')
			_body.addClass('serif');
		else {
			loadgooglefont(cook);
			_body.addClass(cook.replace(/ /g, "-"));
		}
	}


	/* https://devsakaso.com/javascript-read-google-fonts-efficiently/ */
	function loadgooglefont(FontFamilyName) {
		// google fontsを非同期で読み込み
		var fonturl = FontFamilyName.replace(/ /g, "+");
		window.WebFontConfig = {
			google: {
				families: [fonturl, 'Overpass']
			},
			active: function () {
				sessionStorage.fonts = true;
			},
		};

		var wf = document.createElement('script');
		wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
		wf.type = 'text/javascript';
		wf.async = 'true';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(wf, s);
	}
});

もちろんですが

Webサイトの設定をcookieで読み出しできることを前提としないといけません。

cookieに設定されているため、JavaScriptが動作して
初めてきちんとフォントが切り替わります。

その為、google fontから全読み込みするようなフォントは
「*」
で、一括指定してしまっても大丈夫なようです。
後からClassが設定され、読み込まれますので。

注意

設定画面においてもフォントを動的に入れ替えてプレビューすることもできますが、
読み込むgoogle fontが多すぎるとプレビューできなくなりますので、プレビューせずリロードで対応して下さい。