JavaScript、HTML、CSSでWebフォントを検出する方法

2024-04-06

Webページで使用されているフォントを検出する方法

CSS font-family プロパティは、要素に適用されるフォントファミリーを指定するために使用されます。このプロパティを使用して、Webページで使用されているフォントのリストを取得できます。

<p style="font-family: 'Arial', sans-serif;">This is some text.</p>

上記の例では、p 要素に Arial フォントが適用されています。このフォントがWebページで使用されているかどうかを確認するには、次のJavaScriptコードを使用できます。

const element = document.querySelector('p');
const font = element.style.fontFamily;

console.log(font); // 'Arial, sans-serif'

getComputedStyle() メソッドは、要素のスタイルを取得するために使用されます。このメソッドを使用して、要素に適用されるフォントファミリーを含む、要素のすべてのスタイルプロパティを取得できます。

<p style="font-family: 'Arial', sans-serif;">This is some text.</p>

const element = document.querySelector('p');
const style = getComputedStyle(element);
const font = style.fontFamily;

console.log(font); // 'Arial, sans-serif'

@font-face ルールは、Webページにカスタムフォントを埋め込むために使用されます。このルールを使用して、Webページで使用されているカスタムフォントのリストを取得できます。

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff');
}

const fonts = document.fonts;
const font = fonts.find(font => font.family === 'MyCustomFont');

console.log(font); // Font object

JavaScriptライブラリを使用する

Webページで使用されているフォントを検出するために使用できるJavaScriptライブラリがいくつかあります。これらのライブラリは、上記のいずれかの方法を使用してフォントを検出し、より使いやすいインターフェースを提供します。

Webページで使用されているフォントを検出するには、いくつかの方法があります。上記の方法のいずれを使用しても、Webページで使用されているフォントのリストを取得できます。

補足

上記の方法を使用して、Webページで使用されているすべてのフォントのリストを取得できます。
特定の要素で使用されているフォントのみを取得したい場合は、getComputedStyle() メソッドを使用できます。
Webページにカスタムフォントを埋め込んでいる場合は、@font-face ルールを使用して、そのフォントが使用されているかどうかを確認できます。
JavaScriptライブラリを使用すると、Webページで使用されているフォントを検出する作業がより簡単になります。

サンプル1: CSS font-family プロパティを使用する

<p style="font-family: 'Arial', sans-serif;">This is some text.</p>

const element = document.querySelector('p');
const font = element.style.fontFamily;

console.log(font); // 'Arial, sans-serif'

サンプル2: getComputedStyle() メソッドを使用する

<p style="font-family: 'Arial', sans-serif;">This is some text.</p>

const element = document.querySelector('p');
const style = getComputedStyle(element);
const font = style.fontFamily;

console.log(font); // 'Arial, sans-serif'

サンプル3: @font-face ルールを使用する

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff');
}

const fonts = document.fonts;
const font = fonts.find(font => font.family === 'MyCustomFont');

console.log(font); // Font object

<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.2.2/fontfaceobserver.min.js"></script>

<p style="font-family: 'MyCustomFont', sans-serif;">This is some text.</p>

const fontObserver = new FontFaceObserver('MyCustomFont');

fontObserver.load().then(() => {
  console.log('Font is loaded');
}, () => {
  console.log('Font is not loaded');
});