Apple 한국 홈페이지 웹폰트 다운로드해 사용하기
개인적으로 사용하기 위해 Apple 한국 홈페이지의 웹폰트(San Francisco)를 다운로드해서 사용하고자 한다.
이 스타일시트를 확인하고 트루타입 폰트를 다운로드하려 하니 다운로드되지 않는다. WOFF2도 일부만 다운로드된다. 웹사이트에 로드된 웹폰트만 다운로드되는 모양이다. 검사기로 웹사이트의 텍스트 한 부분을 선택하고 font-weight를 100부터 900까지 차례로 바꿔가며 웹폰트가 로드될 수 있게 해주었다. 이걸로 WOFF2는 모든 웨이트를 다운로드할 수 있게 되었다.
다운로드한 WOFF2 파일을 트루타입으로 변환해서 사용해도 되지만 스타일시트에 트루타입 폰트 파일이 보여서 그런지 이걸 다운로드해 사용하고 싶다. 그러면 웹사이트에 트루타입 폰트가 로드되어야 할 것이다.
그래서 WOFF를 지원하지 않는 버전의 Firefox를 설치했다. Firebug도 추가로 설치해야 한다.
그리고 아까 위에서 한 것과 같은 방법으로 모든 트루타입 폰트를 다운로드했다.
이제 이걸 범용적으로 사용할 수 있게 합쳐보자. SF Pro Display / Text - SF Pro JP (AXIS Std) - SF Pro KR (Sandoll 고딕Neo1) 순서로 두 가지 패밀리를 만들 것이다.
FontForge를 설치하고 시스템 환경 변수를 설정해준다. FontForge Scripting functions를 참고하여 스크립트를 작성할 것이다.
그 전에 각 폰트의 Em 크기를 확인한다. SF Pro Display / Text, SF Pro KR의 Em 크기는 2048인데 SF Pro JP의 Em 크기만 1000인 것을 볼 수 있다. 그래서 MergeFonts 전에 Em 크기를 맞추기 위한 스크립트를 작성한다.
#!/usr/local/bin/fontforge
Open($2,32)
SelectAll()
ScaleToEm(2048)
Generate("2.ttf")
Close()
Open($1,32)
MergeFonts("2.ttf")
MergeFonts($3,32)
MergeFonts($4,32)
Generate($5)
Close()
스크립트를 돌려보면 이런 게 뜬다. 매핑되어야 할 위치에 해당 글리프를 복사해주기로 했다. 완성된 스트립트는 다음과 같다.
#!/usr/local/bin/fontforge
Open($2,32)
SelectAll()
ScaleToEm(2048)
Generate("2.ttf")
Close()
Open($1,32)
MergeFonts("2.ttf")
MergeFonts($3,32)
MergeFonts($4,32)
Reencode("unicode")
Select(0ub5)
Copy()
Select(0u03bc)
Paste()
SelectNone()
Select(0u2011)
Copy()
Select(0u2d)
Paste()
SelectNone()
Select(0u25b8)
Copy()
Select(0u2023)
Paste()
SelectNone()
Select(0u0332)
Copy()
Select(0u0331)
Paste()
SelectNone()
Select(0u2060)
Copy()
Select(0u200b)
Paste()
SelectNone()
Generate($5)
Close()배치 파일은 다음과 같이 작성하였다.
fontforge -lang=ff -script mergefonts.sh sf-pro-display_ultralight.ttf SFProJP_ultralight.ttf SFProKRDisplay_ultralight.ttf sf-pro-icons_ultralight.ttf SF-Display-100.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_thin.ttf SFProJP_thin.ttf SFProKRDisplay_thin.ttf sf-pro-icons_thin.ttf SF-Display-200.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_light.ttf SFProJP_light.ttf SFProKRDisplay_light.ttf sf-pro-icons_light.ttf SF-Display-300.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_regular.ttf SFProJP_regular.ttf SFProKRDisplay_regular.ttf sf-pro-icons_regular.ttf SF-Display-400.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_medium.ttf SFProJP_medium.ttf SFProKRDisplay_medium.ttf sf-pro-icons_medium.ttf SF-Display-500.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_semibold.ttf SFProJP_semibold.ttf SFProKRDisplay_semibold.ttf sf-pro-icons_semibold.ttf SF-Display-600.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_bold.ttf SFProJP_bold.ttf SFProKRDisplay_bold.ttf sf-pro-icons_bold.ttf SF-Display-700.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_heavy.ttf SFProJP_heavy.ttf SFProKRDisplay_black.ttf sf-pro-icons_heavy.ttf SF-Display-800.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-display_black.ttf SFProJP_black.ttf SFProKRDisplay_black.ttf sf-pro-icons_black.ttf SF-Display-900.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_ultralight.ttf SFProJP_ultralight.ttf SFProKRDisplay_ultralight.ttf sf-pro-icons_ultralight.ttf SF-Text-100.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_thin.ttf SFProJP_thin.ttf SFProKRDisplay_thin.ttf sf-pro-icons_thin.ttf SF-Text-200.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_light.ttf SFProJP_light.ttf SFProKRDisplay_light.ttf sf-pro-icons_light.ttf SF-Text-300.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_regular.ttf SFProJP_regular.ttf SFProKRDisplay_regular.ttf sf-pro-icons_regular.ttf SF-Text-400.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_medium.ttf SFProJP_medium.ttf SFProKRDisplay_medium.ttf sf-pro-icons_medium.ttf SF-Text-500.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_semibold.ttf SFProJP_semibold.ttf SFProKRDisplay_semibold.ttf sf-pro-icons_semibold.ttf SF-Text-600.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_bold.ttf SFProJP_bold.ttf SFProKRDisplay_bold.ttf sf-pro-icons_bold.ttf SF-Text-700.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_heavy.ttf SFProJP_heavy.ttf SFProKRDisplay_black.ttf sf-pro-icons_heavy.ttf SF-Text-800.ttf
fontforge -lang=ff -script mergefonts.sh sf-pro-text_black.ttf SFProJP_black.ttf SFProKRDisplay_black.ttf sf-pro-icons_black.ttf SF-Text-900.ttf
한글 자형이 다소 작아 보이지만 Apple 한국 홈페이지에 사용된 San Francisco의 웹폰트가 그런 것이니 이걸로 만족.
Sandoll 고딕Neo1과 비교해보았다.
