HTML5 Canvas에서 @font-face 폰트가 처음에 적용되지 않는 문제와 해결 방법

@font-face를 통해 로드한 웹 폰트로 HTML5 <canvas>에 텍스트를 그리면, 처음에는 텍스트가 의도한 서체대로 표시되지 않는 문제가 자주 발생합니다.

문제의 원인

이 현상의 원인은 브라우저가 아직 네트워크에서 해당 폰트를 완전히 불러오지 못했기 때문입니다. 폰트 로딩이 끝나기 전에 캔버스에 텍스트를 그리면, 브라우저는 시스템에 이미 있는 기본 폰트를 대신 사용합니다. 그 결과 화면에는 의도했던 서체가 아닌 다른 글꼴로 렌더링됩니다.

즉, 폰트는 반드시 사용하기 전에 완전히 로드되어야 합니다.

해결 방법 1: 숨겨진 div 태그로 폰트 미리 로드하기

페이지에 해당 폰트를 실제로 사용하는 요소를 배치하면, 브라우저가 캔버스 렌더링 전에 폰트를 미리 다운로드하게 만들 수 있습니다. 폰트의 가용 여부를 확인하거나 다른 요소들을 함께 미리 로드하고 싶다면 다음과 같이 <div> 태그를 활용하면 됩니다.

<div style="font-family: PressStart;"></div>

이처럼 폰트를 지정한 요소를 문서에 포함시켜 두면, 브라우저가 해당 폰트를 먼저 내려받으므로 캔버스에서도 올바른 서체가 적용됩니다.

해결 방법 2: FontFace API로 폰트 로드 제어하기

JavaScript의 FontFace API를 사용하면 폰트 로딩 과정을 명시적으로 제어할 수 있어 더욱 확실한 방법입니다. 폰트 객체를 생성하고 load() 메서드를 호출한 뒤, 로딩이 완료되면 document.fonts에 추가하면 됩니다.

var newFont = new FontFace('New Font', 'url(https://samplefont.woff2)');
newFont.load().then(function(font){
    document.fonts.add(font);
    alert('폰트가 성공적으로 로드되었습니다!');
});

이 방식을 사용하면 폰트 로딩이 완료된 시점을 정확히 알 수 있으므로, 그 이후에 캔버스에 텍스트를 그리도록 코드를 작성하면 폰트가 누락되는 문제를 완전히 방지할 수 있습니다.

추가 팁: document.fonts.ready 활용

페이지에서 사용 중인 모든 폰트의 로딩 완료 시점을 감지하려면 document.fonts.ready 프로미스를 활용하는 것도 좋은 방법입니다. 이 프로미스가 resolve된 후 캔버스 렌더링을 실행하면 안정적으로 원하는 서체를 표시할 수 있습니다.