웹폰트는 다양한 글꼴을 웹 페이지에서 사용할 수 있게 해주는 기술입니다. 그러나 웹 폰트 파일은 보안 상의 이유로 Cross-Origin Resource Sharing (CORS) 정책에 의해 제한될 수 있습니다. 이는 웹 브라우저가 도메인 간 리소스 공유를 제한하여 다른 도메인에서 호스팅되는 웹 폰트 파일에 접근하는 것을 방지하는 보안 기능입니다.
이제 자바스크립트를 사용하여 CORS를 설정하여 다른 도메인의 웹 폰트를 사용하는 방법을 알아보겠습니다.
1. 서버에서 CORS 헤더 설정
다른 도메인에 호스팅된 웹 폰트 파일에 접근하기 위해선, 해당 서버에서 CORS 헤더를 설정해야 합니다. 이를 위해서는 서버의 설정 파일에 다음 코드를 추가해주세요:
Access-Control-Allow-Origin: *
위 코드는 모든 도메인에서 접근을 허용하는 예시입니다. 보안 상의 이유로 실제 서비스에 사용하기 위해서는 ‘*’ 대신 특정 도메인을 지정하는 것이 좋습니다. 이러한 설정은 서버마다 다를 수 있으므로 해당 서버의 문서를 확인하시기 바랍니다.
2. 자바스크립트에서 폰트 로딩
자바스크립트를 사용하여 웹 폰트를 로딩하려면, 다음 스크립트를 HTML 문서에 추가해주세요:
var font = new FontFace('FontName', 'url(https://external-domain.com/webfont.woff)');
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
// 폰트를 사용하는 추가 로직을 작성하세요
}).catch(function(error) {
console.log('폰트 로딩 중에 오류가 발생했습니다:', error);
});
위 코드에서 ‘FontName’은 원하는 폰트 이름으로 변경하고, ‘https://external-domain.com/webfont.woff’은 실제 웹 폰트 파일이 위치한 URL로 변경해주세요.
폰트를 성공적으로 로딩하면, .then() 블록 내부에 추가 로직을 작성하여 폰트를 사용할 수 있습니다. 폰트 로딩 중에 오류가 발생하면 .catch() 블록 내부에서 오류를 처리할 수 있습니다.
3. 폰트 스타일 적용
로드가 완료된 폰트를 사용하려면 해당 폰트의 스타일을 적용해야 합니다. 이를 위해서는 CSS 스타일시트를 사용하여 폰트를 적용해주세요. 예를 들어:
body {
font-family: 'FontName', sans-serif;
}
위 코드에서 ‘FontName’은 자바스크립트에서 로드한 웹 폰트의 이름과 일치해야 합니다.
요약
CORS를 사용하여 자바스크립트에서 다른 도메인의 웹 폰트를 사용하기 위해서는 서버에서 CORS 헤더를 설정하고, 자바스크립트를 사용하여 폰트를 로딩한 뒤 폰트 스타일을 적용해야 합니다. 이를 통해 웹 페이지에 다른 도메인의 웹 폰트를 사용할 수 있게 됩니다.