FontFace를 활용하여 웹사이트의 글꼴을 동적으로 로딩하기

FontFace란?

Web API의 FontFace는 CSS에서 사용할 수 있는 외부 글꼴을 로드하고 관리하는 역할을 합니다. FontFace를 사용하면 다음과 같은 상황에서 유용하게 사용할 수 있습니다.

 

1. 웹사이트에 특정 글꼴을 사용하고 싶은 경우

2. 웹사이트에서 지원하지 않는 글꼴을 사용하고 싶은 경우

3. 사용자가 웹사이트에서 특정 글꼴을 선택하는 경우 해당 글꼴을 동적으로 로드하는 경우

 

예제 코드

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  // fonts 배열은 커스텀 폰트 정보를 담고 있습니다.
  // ex) 서버에서 불러온 font 정보들
  const fonts = [
    {
      family: 'CustomFont',
      fileUrl: '/path/to/custom-font.woff2',
    },
    // 추가적인 폰트 정보들...
  ];

  React.useEffect(() => {
    const loadFontFace = () => {
      fonts.forEach(font => {
        const fontFile = new FontFace(font.family, `url(${font.fileUrl ?? ''})`);

        fontFile
          .load()
          .then(e => {
            document['fonts'].add(e);
          })
          .catch(e => {
            console.error(font.family, e);
          });
      });
    };

    loadFontFace();
  }, [fonts]);

  return (
    <div className="my-component">
      <p style={{ fontFamily: 'CustomFont, sans-serif' }}>
        안녕하세요, 웹 폰트의 힘을 느껴보세요!
      </p>
    </div>
  );
};

export default MyComponent;

 

 

FontFace를 사용 시 고려해야 할 사항

1. 글꼴의 크기가 크면 로드 시간이 오래 걸릴 수 있습니다.
   • FontFace는 글꼴을 웹페이지에 로드할 때 사용됩니다. 글꼴의 크기가 크면 로드 시간이 오래 걸릴 수 있습니다. 따라서, 글꼴의 크기를 최소화하여 로드 시간을 줄이는 것이 좋습니다.
2. 글꼴의 라이선스를 확인해야 합니다.
   • FontFace를 사용하려면 글꼴의 라이선스를 확인해야 합니다. 글꼴의 라이선스에 따라 사용 범위가 제한될 수 있습니다. 따라서, 글꼴을 사용하기 전에 라이선스를 확인하여 사용 범위를 확인하는 것이 좋습니다.