<br>
## 문제
- 아이폰에서 커스텀 폰트(custom font)를 적용할 수 있는 방법이 없어 사용자가 원하는 글꼴을 적용할 수 없다.
- 커스텀 폰트를 적용하는 방법은 크게 2가지가 있다.
- 첫째, 폰트 앱을 이용해 폰트를 직접 설치하는 방법
- 둘째, 인터넷에 있는 웹 폰트를 CSS, JavaScript 등으로 로딩하는 방법
- 폰트 앱은 [Adobe Creative Cloud](https://apps.apple.com/us/app/adobe-creative-cloud/id852473028), [AnyFont](https://apps.apple.com/us/app/anyfont/id821560738), [iFont](https://apps.apple.com/us/app/ifont-find-install-any-font/id1173222289) 등이 있다.
- 분석맨의 목적은 사파리에서 웹 콘텐츠(네이버 뉴스 등)를 읽을 때, 원하는 폰트로 읽는 게 목표라 두 번째 방법을 사용한다.
<br>
## 해결 방법
- 아래 References에 링크된 있는 방법을 이용해 폰트를 설치한다.
- 하지만, 폰트를 설치해도 Pages, Word, Drfts 등 호환되는 앱에서만 적용된다.
- 두 번째 방법인 웹 폰트를 적용하는 방법은 아래와 같다.
1. 아이폰의 사파리(Safari) 앱에서 아무 사이트나 접속해서 북마크(Bookmark) 한다.
분석맨은 Font라는 이름으로 북마크했다.
![[iPhone_Safari_Bookmark.PNG]]
<br>
2. 북마크한 사이트(Font)를 수정하고, 아래와 같은 코드를 넣는다.
![[iPhone_Safari_Bookmark_AddCode.PNG]]
<br>
- 삽입한 코드
```
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');
```
한글 글꼴은 [나눔스퀘어](https://hangeul.naver.com/font)(NanumSquare)와 [마루부리](https://hangeul.naver.com/maruproject_10)(MaruBuri), 영문 글꼴은 구글 폰트인 [Actor](https://fonts.google.com/specimen/Actor)를 사용했다. 원하는 글꼴로 변경해주면 된다.
<br>
## 사용법
1. 아이폰 사파리에서 네이버 뉴스를 읽으면 아래와 같은 폰트로 표시된다.
![[iPhone_Safari_before_FontChange.PNG]]
<br>
2. 북마크 아이폰을 클릭 후, Custom Font를 북마크한 Font를 클릭한다.
![[iPhone_Safari_bookmark_FontChange.PNG]]
<br>
3. 아래와 같이 나눔스퀘어와 Actor 폰트가 적용된 폰트로 변경되었다.
![[iPhone_Safari_after_FontChange.PNG]]
<br>
## References
[아이폰·아이패드(iOS), 안드로이드에서 웹 사이트 글꼴을 명조로 읽기 + iOS... - 이른](https://02rainbowblog.tumblr.com/post/171053015311/%EC%95%84%EC%9D%B4%ED%8F%B0%EC%95%84%EC%9D%B4%ED%8C%A8%EB%93%9Cios-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EC%97%90%EC%84%9C-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EA%B8%80%EA%BC%B4%EC%9D%84-%EB%AA%85%EC%A1%B0%EB%A1%9C-%EC%9D%BD%EA%B8%B0-ios)
[How to use custom fonts on iPhone and iPad - 9to5Mac](https://9to5mac.com/2019/06/12/ios-13-how-to-use-custom-fonts-on-iphone-and-ipad/)
<br>
## Links
[[_Index_2_IT]]
[아이폰에서 사파리에 웹폰트 글꼴 적용하는 방법 | 분석맨의 '상상력'](https://kr.analysisman.com/2022/10/iphone-safari-webfont.html)