개발자
네이버 나눔스퀘어네오 가변 글꼴 웹 적용 안되는 현상
2024년 05월 08일•조회 705
아래는 테스트를 위한 코드입니다. pretendard는 가변 글꼴 비교를 위해 넣었습니다. 윈도우11 기준 크로미움 123버전 까지 잘 동작했는데, 124버전으로 업그레이드한 후로 제대로 동작하지 않습니다. 무엇이 문제일까요? 크롬: 123이하 O / 124부터 X 엣지: 123이하 O / 124부터 X 파이어폭스: O https://campaign.naver.com/nanumsquare_neo/
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7
8 <style>
9 @font-face {
10 font-family: "Pretendard-Variable";
11 src: url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2")
12 format("woff2-variations");
13 font-weight: 1 1000;
14 font-style: normal;
15 font-display: swap;
16 }
17
18 @supports not (font-variation-settings: normal) {
19 @font-face {
20 font-family: "NanumSquareNeo";
21 font-weight: 100;
22 src: url("https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/woff2/NanumSquareNeoTTF-aLt.woff2")
23 format("woff2");
24 }
25
26 @font-face {
27 font-family: "NanumSquareNeo";
28 font-weight: 300;
29 src: url("https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/woff2/NanumSquareNeoTTF-bRg.woff2")
30 format("woff2");
31 }
32
33 @font-face {
34 font-family: "NanumSquareNeo";
35 font-weight: 500;
36 src: url("https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/woff2/NanumSquareNeoTTF-cBd.woff2")
37 format("woff2");
38 }
39
40 @font-face {
41 font-family: "NanumSquareNeo";
42 font-weight: 700;
43 src: url("https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/woff2/NanumSquareNeoTTF-dEb.woff2")
44 format("woff2");
45 }
46
47 @font-face {
48 font-family: "NanumSquareNeo";
49 font-weight: 800;
50 src: url("https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/woff2/NanumSquareNeoTTF-eHv.woff2")
51 format("woff2");
52 }
53 }
54
55 @supports (font-variation-settings: normal) {
56 @font-face {
57 font-family: "NanumSquareNeo";
58 src: url("https://cdn.jsdelivr.net/npm/@noonnu/nanum-square-neo-variable@0.1.0/fonts/nanumsquareneo-variable-normal.woff2")
59 format("woff2 supports variations"),
60 url("https://cdn.jsdelivr.net/npm/@noonnu/nanum-square-neo-variable@0.1.0/fonts/nanumsquareneo-variable-normal.woff2")
61 format("woff2-variations");
62 font-weight: 1 1000; /* 가변 굵기 범위 */
63 font-style: normal;
64 font-display: swap;
65 }
66 }
67
68 body {
69 display: flex;
70 font-size: 2rem;
71 }
72
73 .nanum {
74 font-family: "NanumSquareNeo";
75 }
76
77 .pretendard {
78 font-family: "Pretendard-Variable";
79 }
80 </style>
81 </head>
82 <body>
83 <div class="nanum">
84 <p>NanumSquareNeo 가변</p>
85 <p style="font-weight: 100; font-variation-settings: 'wght' 100">
86 Font Test 100
87 </p>
88 <p style="font-weight: 200; font-variation-settings: 'wght' 200">
89 Font Test 200
90 </p>
91 <p style="font-weight: 300; font-variation-settings: 'wght' 300">
92 Font Test 300
93 </p>
94 <p style="font-weight: 400; font-variation-settings: 'wght' 400">
95 Font Test 400
96 </p>
97 <p style="font-weight: 500; font-variation-settings: 'wght' 500">
98 Font Test 500
99 </p>
100 <p style="font-weight: 600; font-variation-settings: 'wght' 600">
101 Font Test 600
102 </p>
103 <p style="font-weight: 700; font-variation-settings: 'wght' 700">
104 Font Test 700
105 </p>
106 <p style="font-weight: 800; font-variation-settings: 'wght' 800">
107 Font Test 800
108 </p>
109 <p style="font-weight: 900; font-variation-settings: 'wght' 900">
110 Font Test 900
111 </p>
112 </div>
113 <div class="pretendard">
114 <p>Pretendard 가변</p>
115 <p style="font-weight: 100">Font Test 100</p>
116 <p style="font-weight: 200">Font Test 200</p>
117 <p style="font-weight: 300">Font Test 300</p>
118 <p style="font-weight: 400">Font Test 400</p>
119 <p style="font-weight: 500">Font Test 500</p>
120 <p style="font-weight: 600">Font Test 600</p>
121 <p style="font-weight: 700">Font Test 700</p>
122 <p style="font-weight: 800">Font Test 800</p>
123 <p style="font-weight: 900">Font Test 900</p>
124 </div>
125 </body>
126</html>이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이
더 많은 사람에게 노출될 수 있어요.
'보충이 필요해요' 버튼을 누르면 질문자에게
질문 내용 보충을 요청하는 알림이 가요.
허니 FE 님의 질문
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
AI 답변
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 08일
크롬 124 버전 이후로는 일부 CSS 기능에 변화가 있다고 알려져 있습니다. 아마도 그런 변화 중 하나가 나눔스퀘어네오 가변 글꼴의 웹 적용에 영향을 미친 것으로 보입니다. 문제를 해결하기 위해서는 크롬 또는 엣지의 최신 변경 사항을 확인하는 것이 좋습니다. 크롬 개발자 도구를 사용하여 실제로 로드되지 않은 폰트를 확인할 수 있습니다. 개발자 도구에서 네트워크 탭을 여시면 어떤 asset들이 제대로 로딩되었는지, 어떤 것들이 실패했는지 확인 가능합니다. 다만, 이러한 문제가 발생하면 일반적으로 웹 폰트 호스팅 서비스 자체에 문제가 있는 경우가 많으니, jsdelivr.net 의 상태도 확인해보시는걸 추천드립니다. 심각한 문제라면 Chromium의 issue tracker를 통해 버그 리포트를 제출하고, 해당 문제를 해결하기 위한 업데이트가 내려질 때까지 기다려야 할 수도 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!