- @font-faceルールを使用する方法: @font-faceルールを使用すると、カスタムフォントをウェブページに追加できます。まず、フォントファイル（.woff、.woff2、.ttfなど）をウェブサーバーにアップロードします。次に、以下のような@font-faceルールを作成します。
var font = new FontFace('CustomFont', 'url(path/to/font.woff)');
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
document.body.style.fontFamily = 'CustomFont';
}).catch(function(error) {
console.log('フォントの読み込みエラー:', error);
});この例では、'CustomFont'という名前のカスタムフォントを追加し、ウェブページのbody要素のフォントファミリーを設定しています。
- Google Fontsを使用する方法: Google Fontsは、様々なカスタムフォントを提供しています。ウェブページにフォントを追加するには、以下の手順を実行します。
まず、Google Fontsのウェブサイト（https://fonts.google.com/）にアクセスし、使用したいフォントを検索します。フォントを選択したら、指示に従ってCSSコードを取得します。
var link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/css?family=FontName';
link.rel = 'stylesheet';
document.head.appendChild(link);上記の例では、'FontName'の部分を使用したいフォントの名前に置き換えます。これにより、指定したフォントがウェブページに追加されます。
- ライブラリを使用する方法: いくつかのJavaScriptライブラリ（例:WebFont Loader）を使用すると、フォントの動的な読み込みをより簡単に行うことができます。これらのライブラリは、フォントの読み込みが完了するまでページのレンダリングをブロックしないため、パフォーマンスの向上にも役立ちます。
例えば、WebFont Loaderを使用する場合は、以下の手順を実行します。
まず、WebFont Loaderスクリプトをウェブページに追加します。
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>次に、以下のようなコードを記述してフォントを読み込みます。
WebFont.load({
google: {
families: ['FontName']
},
active: function() {
// フォントの読み込みが完了した後に実行する処理
document.body.style.fontFamily = 'FontName';
},
inactive: function() {
// フォントの読み込みに失敗した場合の処理
console.log('フォントの読み込みエラー');
}
});上記の例では、'FontName'の部分を使用したいフォントの名前に置き換えます。WebFont Loaderは、指定したフォントが読み込まれると、active関数が呼び出されます。
これらはJavaScriptを使用して動的にフォントを追加するいくつかの方法です。ウェブページの要件や環境に応じて、適切な方法を選択してください。