저는 현재 웹 애플리케이션을 개발 중이며 CSS의 @font-face 규칙을 사용하여 특정 요소에 대한 사용자 정의 글꼴을 구현하려고 합니다. 글꼴을 정의하고 이를 특정 요소에 적용하는 표준 프로세스를 따랐지만 글꼴을 올바르게 렌더링하는 데 문제가 있습니다.

제가 사용한 관련 코드는 다음과 같습니다.

@font-face { 글꼴 계열: 스와이프 아이콘; 글꼴 스타일: 일반; 글꼴 두께: 400; src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAZgABAAAAAD...') /* 나머지 base64 인코딩 글꼴 데이터 */ } .my-맞춤-글꼴 { 글꼴 모음: "swiper-icons", sans-serif; }

base64 문자열을 디코딩하고 글꼴 파일을 .woff 확장자로 저장했습니다. 그러나 my-custom-font 클래스를 요소에 적용하면 글꼴이 예상대로 렌더링되지 않는 것 같습니다. 온라인 글꼴 렌더링 도구(https://fontdrop.info)를 사용하여 글꼴 미리보기를 시도했지만 역시 작동하지 않았습니다.

내가 확인하고 시도한 것:

• base64 문자열 전체가 올바르게 디코딩되었는지 확인했습니다.
• 글꼴 파일이 올바른 형식으로 저장되었는지 확인했습니다.
• CSS에서 올바른 글꼴 모음 이름("swiper-icons")을 사용했습니다.
• 브라우저 콘솔을 확인해 보니 글꼴 로딩이나 렌더링과 관련된 오류 메시지가 없습니다.

제가 놓친 부분이나 잘못한 부분이 있나요? 글꼴이 올바르게 렌더링되도록 하려면 추가 단계가 필요합니까? 특정 글꼴 형식이나 온라인 렌더링 도구 간에 호환성 문제가 있을 수 있습니까? 이 글꼴 렌더링 문제를 해결하는 방법에 대한 지침을 제공해 주셔서 대단히 감사합니다.