Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
일단 완전 편리한 구글 폰트부터 빠르게 보고 가도록 하자.
구글 폰트를 이용하면 파일 업로드 다운로드 과정이 없기 때문에 직접 업로드하는 방식보다 조금이나마 쾌적하고 무엇보다 굳이 파일을 준비하거나 미리 설정할 게 없어서 굉장히 편하다.
너무너무 쉽고 편해서 따로 설명할 것이 없다.
나는 스크린샷을 두 번 찍기 귀찮아서 html에서 바로 style을 지정해줬을 뿐 css파일에서 font-family를 지정해주는 것이 일반적이다.
그리고 그냥 폰트 한 개만 적용해놓고 굵기를 조절하는 것과 애초에 해당 굵기에 맞는 파일을 준비해놓은 것은 질이 다르니 미리 여러 사이즈를 준비해놓도록 하자.
두번째로 직접 내가 업로드해서 사용자가 해당 폰트로 웹 페이지를 이용하도록 하는 방식이 있다.
WOFF나 TFF나 어차피 업로드 방식은 다를 게 없으니 방법부터 빠르게 확인해보도록 하자.
1. CSS파일에서 @font-face라는 명령어를 사용해서 font-family의 이름을 지어주고 (유지 보수를 위해서라면 당연히 원래 폰트 이름과 똑같이 짓는 것이 좋다) 해당 폰트 파일이 만약 특정 font-weight에 맞춰서 만들어진 것이라면 해당 숫자를 적어준다.
2. 마찬가지로 body나 기타 원하는 곳에 폰트 패밀리를 지정하고 적용해줘야 한다.
적용 방법 자체는 어려울 게 없지만 구글 폰트를 사용하는 것에 비해 단점이 많다.
· 사용자가 폰트 파일을 다운로드 받는 과정에서 폰트 파일이 크거나 많을 수록 시간이 오래 걸리고 로딩을 유발할 수 있다.
· 내가 돈을 주고 구매한 폰트라고 웹에서 사용해도 되는 것은 아니기 때문에 저작권 문제를 확실하게 확인해야 한다.
· 구형 브라우저를 사용하고 있는 고객까지 신경쓰려면 별도의 귀찮은 과정을 더 거쳐야 한다.
이 중 첫 번째 문제는 완화할 수 있는데 WOFF 형식의 폰트 파일을 활용하는 것이다.
Web Open Font Format이라는 뜻으로 WOFF 형식의 폰트 파일은 TFF 형식의 폰트 파일보다 30%의 용량 밖에 차지하지 않는다.
그리고 기존 가지고 있는 TTF 파일을 WOFF로 변환하는 것도 가능하다.
TTF WOFF 변환 (온라인 무료) — Convertio
ttf 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.
convertio.co
한글 사이트고 굉장히 직관적이기 때문에 별도의 설명은 하지 않겠다.
어어?? 근데 TTF랑 WOFF만 얘기하고 있었는데 스크린샷 보니까 님이 쓰는 파일은 OTF인데요??
TTF와 OTF는 다른 것이지만 위에서 이야기한 파일 크기와 로딩 문제는 동일하게 적용된다.
차이점에 대해서는 웹 개발자보다는 디자이너가 알아야하는 지식이고 이 글에서 굳이 다룰만한 내용은 아니라고 생각되니 궁금하면 직접 찾아보자.
'Language & Framework > HTML CSS' 카테고리의 다른 글
| CSS로 flip 효과 간단하게 구현하기 (0) | 2022.02.15 |
|---|---|
| SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게. (0) | 2022.02.12 |
| 구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기 (1) | 2022.01.29 |
| 시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게. (0) | 2022.01.05 |
| CSS 반응형 단위의 종류와 사용. %와 vw, em과 rem의 차이점. 핵심만 간단히. (0) | 2022.01.02 |
