폰트 렌더링이 되고 있지 않은 상태 -해결

현상: 원하는 폰트 css 스타일 적용시키고 JS fetch 했는데도 적용 안된 것 처럼 보임

확인: 글 선택후- 웹 개발모드에 -Rendered Fonts 검색 - 아래에 뜨는 게 현재 선택한 것 폰트

 

문제:
fetch 되자 html에 임시로 써놓은 style이 다 덮어씌워져서
아무리 !important를 붙여도 소요이 없음
html 내 js code에 fetch후 -> 폰트 적용하는 코드를 추가해서 , 실행하도록 수정

if (includePath) {
            fetch(includePath)
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    } else {
                        return null;
                    }
                })
                .then(data => {
                    if (data) {
                        el.outerHTML = data;

                        // 🛠️ 스타일 다시 추가 (덮어씌워졌을 경우)--
                        const style = document.createElement('style');
                        style.innerHTML = `
                            @font-face {
                                font-family: '원하는폰트';
                                font-style: normal;
                                font-weight: 400;
                                src: url("/폰트경로~~/폰트이름.ttf") format("truetype");
                                font-display: swap;
                            }
                            body {
                                font-family: '원하는폰트', sans-serif !important;
                            }
                        `;
                        document.head.appendChild(style);
                        // --🛠️ 스타일 다시 추가 끝 
                    }
                })