아이폰에서 폰트 적용안되는 현상 ㅜ 채택완료
몽글몽그리
9개월 전
조회 1,509
급해서 문의 올립니당
지마켓 산스 적용해서 모두 다 출력 되는데
아이폰 사파리에서만 출력이 안되고 다른 폰트로 적용되있어서
어떤 코드를 추가하면 좋을까요?
도움 부탁드립니다 ㅜ
현재 헤더쪽에 적용된것은
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/font-face.css" />
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/font-family.css" />
이 링크 두개입니다
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
9개월 전
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/font-face.css?v=1.0"> 캐싱해보시기바랍니다. 아니면 crossorigin 속성과 as="style" 을 제거해보시구요 또한 호출한 폰트가 woff2 인가 확인해보시구요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 6개
�
몽글몽그리
9개월 전
안되네요 ㅠㅠ
�
웅푸
9개월 전
@font-face 내부폰트 설정에서 절대경로로 설정 되어잇는지도확인해보시구요.
또한
폰트를 불러오는 서버가 HTTPS 서비스를 하고있는지 확인해보시기 바랍니다.
또한
폰트를 불러오는 서버가 HTTPS 서비스를 하고있는지 확인해보시기 바랍니다.
�
웅푸
9개월 전
@font-face {
font-family: "GmarketSans";
font-weight: 700;
font-display: swap;
src: local("Gmarket Sans Bold"),
url("./fonts/woff2/GmarketSansBold.woff2") format("woff2"),
url("./fonts/woff/GmarketSansBold.woff") format("woff");
}
@font-face {
font-family: "GmarketSans";
font-weight: 500;
font-display: swap;
src: local("Gmarket Sans Medium"),
url("./fonts/woff2/GmarketSansMedium.woff2") format("woff2"),
url("./fonts/woff/GmarketSansMedium.woff") format("woff");
}
@font-face {
font-family: "GmarketSans";
font-weight: 300;
font-display: swap;
src: local("Gmarket Sans Light"),
url("./fonts/woff2/GmarketSansLight.woff2") format("woff2"),
url("./fonts/woff/GmarketSansLight.woff") format("woff");
}
//서비스 확인해보면 이렇게 나옵니다.
font-family: "GmarketSans";
font-weight: 700;
font-display: swap;
src: local("Gmarket Sans Bold"),
url("./fonts/woff2/GmarketSansBold.woff2") format("woff2"),
url("./fonts/woff/GmarketSansBold.woff") format("woff");
}
@font-face {
font-family: "GmarketSans";
font-weight: 500;
font-display: swap;
src: local("Gmarket Sans Medium"),
url("./fonts/woff2/GmarketSansMedium.woff2") format("woff2"),
url("./fonts/woff/GmarketSansMedium.woff") format("woff");
}
@font-face {
font-family: "GmarketSans";
font-weight: 300;
font-display: swap;
src: local("Gmarket Sans Light"),
url("./fonts/woff2/GmarketSansLight.woff2") format("woff2"),
url("./fonts/woff/GmarketSansLight.woff") format("woff");
}
//서비스 확인해보면 이렇게 나옵니다.
�
몽글몽그리
9개월 전
이게 아임웹이라 폰트 파일은 따로 없어서 url이 안먹네요... 알려주셔서 감사한데 됴륵 ㅜ
�
웅푸
9개월 전
아니요 저것은 상대경로를 가리키며 실제로 서버에 있다라는 이야기입니다.
그렇면. 절대경로를 써줘야해요 이해하셔다면 적용해보시기바랍니다.
@font-face {
font-family: "GmarketSans";
font-weight: 700;
font-display: swap;
src: url("https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/woff2/GmarketSansBold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/woff/GmarketSansBold.woff") format("woff");
}
그렇면. 절대경로를 써줘야해요 이해하셔다면 적용해보시기바랍니다.
@font-face {
font-family: "GmarketSans";
font-weight: 700;
font-display: swap;
src: url("https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/woff2/GmarketSansBold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/woff/GmarketSansBold.woff") format("woff");
}
�
몽글몽그리
9개월 전
혹시 하신 방법으로 확인하면 ....폰트가 제대로 나오나요? 저는 아이폰에서 확인하는데 변한게 없어서요..ㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인