아이폰에서 사파리에 웹폰트 글꼴 적용하는 방법

문제

• 아이폰에서 커스텀 폰트(custom font)를 적용할 수 있는 방법이 없어 사용자가 원하는 글꼴을 적용할 수 없다.
• 커스텀 폰트를 적용하는 방법은 크게 2가지가 있다.
  • 첫째, 폰트 앱을 이용해 폰트를 직접 설치하는 방법
  • 둘째, 인터넷에 있는 웹 폰트를 CSS, JavaScript 등으로 로딩하는 방법
• 폰트 앱은 Adobe Creative Cloud, AnyFont, iFont 등이 있다.
• 분석맨의 목적은 사파리에서 웹 콘텐츠(네이버 뉴스 등)를 읽을 때, 원하는 폰트로 읽는 게 목표라 두 번째 방법을 사용한다.

해결 방법

• 아래 References에 링크된 있는 방법을 이용해 폰트를 설치한다.
• 하지만, 폰트를 설치해도 Pages, Word, Drfts 등 호환되는 앱에서만 적용된다.두 번째 방법인 웹 폰트를 적용하는 방법은 아래와 같다.
  
  1. 아이폰의 사파리(Safari) 앱에서 아무 사이트나 접속해서 북마크(Bookmark) 한다.
  분석맨은 Font라는 이름으로 북마크했다.
  
  
  
  
  

2. 북마크한 사이트(Font)를 수정하고, 아래와 같은 코드를 넣는다.

• 삽입한 코드

javascript:var css = document.createElement("style");css.type = "text/css";css.innerHTML = "@import url('https://fonts.googleapis.com/css2?family=Actor&display=swap');@import url(https://cdn.jsdelivr.net/gh/moonspam/[email protected]/nanumsquare.css);@import url('https://webfontworld.github.io/naver/MaruBuri.css');* *%7Bfont-family:Actor, NanumSquare, MaruBuri;  

%7D";document.body.appendChild(css);var d=document,z=d.createElement('scr'+'ipt');

한글 글꼴은 나눔스퀘어(NanumSquare), 마루부리(MaruBuri), 영문 글꼴은 구글 폰트인 Actor를 사용했다. 원하는 글꼴로 변경해주면 된다.

사용법

1. 아이폰 사파리에서 네이버 뉴스를 읽으면 아래와 같은 폰트로 표시된다.
   
   
   
   
2. 북마크 아이폰을 클릭 후, Custom Font를 북마크한 Font를 클릭한다.
   
   
   
   
3. 아래와 같이 나눔스퀘어와 Actor 폰트가 적용된 폰트로 변경되었다.
   
   

References

아이폰·아이패드(iOS), 안드로이드에서 웹 사이트 글꼴을 명조로 읽기 + iOS… - 이른
How to use custom fonts on iPhone and iPad - 9to5Mac

Links

[[_Index_2_IT]]