자바스크립트에서 CORS를 통해 다른 도메인의 폰트를 사용하는 방법에 대해 알아보세요.

12 Oct 2023

cors

웹 개발에서는 웹페이지에서 폰트를 사용할 때 종종 다른 도메인에서 호스팅되는 폰트 파일을 이용하게 됩니다. 그러나 보안상의 이유로 인해 웹 브라우저는 기본적으로 Cross-Origin Resource Sharing (CORS) 정책을 따르게 되어 동일 출처 정책(Same-Origin Policy)을 적용합니다. 이는 다른 도메인에서 제공되는 원본 리소스에 대한 요청을 차단하는 역할을 수행합니다.

CORS를 통해 다른 도메인의 폰트를 사용하는 방법에 대해 알아보겠습니다.

1. Access-Control-Allow-Origin 헤더 설정

해당 도메인에서 폰트 파일을 호스팅하는 서버에서는 다음과 같이 Access-Control-Allow-Origin 헤더를 설정해야 합니다. 이 헤더는 웹 브라우저에게 특정 도메인에서 오는 요청을 허용할 수 있는지 여부를 알려주는 역할을 합니다.

Access-Control-Allow-Origin: http://example.com

위 코드에서 http://example.com은 웹페이지를 호스팅하는 도메인을 나타냅니다. 만약 모든 도메인을 허용하고 싶다면 Access-Control-Allow-Origin: *로 설정할 수도 있습니다.

2. @font-face를 통한 폰트 로드

CORS를 허용하는 서버에서 폰트 파일을 호스팅하고 있다면, 폰트를 사용하려는 웹페이지에서 다음과 같이 @font-face를 사용하여 폰트를 로드할 수 있습니다.

@font-face {
  font-family: 'CustomFont';
  src: url('http://otherdomain.com/fonts/customfont.woff2') format('woff2'),
       url('http://otherdomain.com/fonts/customfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

위 코드에서 url 부분에 폰트 파일의 경로를 입력하면 됩니다. 폰트 파일의 확장자와 포맷에 따라 format 옵션을 설정해야 합니다.

주의사항

다른 도메인의 폰트를 사용할 때 주의해야 할 사항이 있습니다.

폰트 파일이 호스팅되는 서버에서 CORS를 허용하고 있는지 확인해야 합니다.
웹 브라우저에서 호스팅 서버와의 통신에 대한 보안 정책(CORS 정책)을 확인해야 합니다.
웹페이지가 로드될 때 폰트가 로드되지 않을 수 있으므로 이를 고려하여 디자인 및 레이아웃을 조정해야 합니다.

이러한 주의사항을 염두에 두고, CORS를 통해 다른 도메인의 폰트를 사용할 수 있습니다.

CORS, Cross-Origin Resource Sharing, 웹 개발, 자바스크립트, 폰트, 다른 도메인, 웹 브라우저