[CSS] Safari환경에서 적용안되는 폰트 해결하기

Chrome 환경에서만 작업을 했었는데, Safari로 들어갔을 때, 적용이 안되는 폰트가 있다는 것을 알게 되었다.

첫번째 해결방법으로는

 * { 
font-family: Hevetica(혹은 다른 서체), AppleSDGothic !important;
}

Hevetica를 최우선으로 표시하고 Hevetica가 표시될 수 없다면, AppleSDGothic를 강제로 적용하는 방법이 있다.

하지만 위 방식으로 적용될경우, 모든 텍스트가 서체 하나(AppleSDGothic)로 표시되어 웹사이트의 개성이 무시되고 가독성이 더 떨어질 수도 있다.

 

따라서 두번째 방법으로, 가독성이 떨어지는 일부 폰트만 Apple SD Gothic Neo로 바꿔 주기로 했다.

 * {
        @font-face {
  font-family: AppleMyungjo;
  src: local('Apple SD Gothic Neo'), local('Nanum Gothic');
}
}

AppleMyungjo로 바뀌어져 있는 폰트를 Apple SD Gothic Neo,(Apple SD Gothic Neo적용이 안된다면)Nanum Gothic로 바꿔주었다.

 

참고 :

font-face에 적용에 관한 MDN  https://developer.mozilla.org/ko/docs/Web/CSS/@font-face
https://macnews.tistory.com/162
https://macnews.tistory.com/3644