폰트를 로컬적용 하는 법
폰트를 다운로드하여서 css 파일에 적용하면 끝입니다. 간단하죠?
css 파일에 font-face로 적용하면 됩니다.
저는 Nanum Pen Script를 다운로드하였기 때문에 NanumScript로 적용시켜볼게요.
@font-face {
font-family: 'Nanum Pen Script';
src: local('NanumPenScript'),
url('./font/Nanum_Pen_Script/NanumPenScript-Regular.ttf') format('truetype');
//너무길어서 보기좋게 줄바꾸겠습니다
}@font-face {
font-family: " 글꼴이름"
==> 이름은 마음대로 설정가능 하지만 나중에 혼란을 줄 수 있기 때문에 같은 폰트와 같은 이름으로 하면 좋겠죠?
src : local('글꼴명')
==> 이건 글꼴명대로 적어주셔야 합니다
url('경로') format('파일유형')
==> 저는 다운로드한 파일을 font파일에다가 넣어줬어요. 파일 유형은 아래에 적어둘게요
}
요렇게 하면 로컬 적용이 끝이 납니다.
▶ local(내가 다운받은 폰트 로딩해 줌)를 찾아보다가 없으면 url에서 다운로드하여서 가져옵니다.
url에 경로를 같은 글꼴의 경로를 적지 않고 다른 글꼴파일에 경로를 적는다면 그 파일의 폰트가 대신 적용이 되니
local이나 url은 여러 번 적어도 괜찮다는 거 그냥 참고용입니다.
아! 다운로드하실 때 유의 사항? 이랄까요?
동그라미 표시되어 있는 곳을 다운로드해야지 밑에 있는 걸로 다운로드하면 많은 파일들이 다운로드하여집니다.
동그라미 표시가 내가 다운로드하고 싶은 폰트파일입니다~ 그냥 헤매시는 분들이 계실까 봐.... 저처럼
웹 폰트 파일 유형과 확장자
. ttf : truetype
.otf : opentype
.eot : embedded-opentype
.woff : woff
.svg : svg
ttf나 otf는 용량이 크기 때문에 woff나 eot를 웹코딩할 때 많이 사용하는데
eot는 미지원하는 웹들이 많기 때문에 woff가 가장 적합하다고 합니다.
확장자에 대해서 더 알아보시고 싶으시면 아래 페이지를 참조해 주세요
woff파일로 변환하시고 싶으시면 아래 사이트를 이용해 주세요
https://convertio.co/kr/ttf-woff/
웹폰트 로딩하는 방법
css파일에 임포트 하거나
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');html파일에 link태그로 넣으면 됩니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
이건 그냥 구글폰트 다운로드하는 왼쪽 편에 link와 import를 선택해서 복사 붙여 넣기만 하면 되는 거기 때문에 더 쉬워요
그리고 font-family 적힌 걸 복사해서 css파일에 적용시켜서 사용하면 끝입니다.
웹 폰트는 웹 전용 폰트를 말합니다.
웹 폰트를 사용하는 것은 내 컴퓨터에 다운로드하지 않아도 온라인 서버에 위치한 폰트를 가져다 쓸 수 있다는 장점이 있는데요.
하지만 웹 폰트는 용량이 크고 폰트를 불러와서 적용하는 거라 웹에 전반적이 속도 저하를 발생시킬 수 있습니다.
속도가 느린 컴퓨터를 가지고 있는 사람들은 웹폰트가 변하는 과정을 볼 수 있죠.
그래서 웹 폰트를 사용할 경우 최적화 과정을 통해서 속도 문제를 해결해야 합니다.
최적화 기법 4가지
1. 최신 파일 형식 사용
woff나 woff2가 지금 기준으로 제일 최신 파일형식이며 용량이 적어서 권장됩니다.
2. font- display 사용 : 브라우저가 웹 폰트를 어느 시점에 적용할지를 결정하는 속성, 명시해주지 않으면 auto로 작용
auto : 기본 동작
swap : 폰트가 로드될 때까지 대체 폰트를 사용하다가 폰트가 로드되면 폰트가 교체되기 때문에
웹 폰트 로딩 여부와 상관없이 항상 텍스트가 보입니다. (FOUT와 동일하게 작동)
fallback : 100ms 동안 텍스트가 보이지 않고, 그 후에 대체 폰트를 사용하는 데 사용하려는 폰트가 3초 내로 로드되지 않으면
그냥 대체 폰트를 계속사용하다가 다음번에 사이트 방문 시 내가 원하는 폰트가 적용됩니다.
(즉 처음 3초 내로 로드 안되면 처음 사이트 방문했을 때는 대체 폰트사용하다
다음에 재방문 시 대체폰트 말고 원하는 폰트사용)
optional : fallback과 비슷하지만 다르게 작동됨 100ms동안 텍스트 보이지 않고
그 후에 대체 폰트로 전환하는데 웹 폰트를 다운로드합니다.
하지만 브라우저가 네트워크 상태를 파악해서 웹폰트 전환 여부를 결정한다는 점이 다릅니다.
(예를 들어 네트워크 연결 상태가 안 좋으면 웹 폰트가 다운로드되어도 캐시에만 저장하고 전환은 하지 않는 거죠)
block : 웹 폰트가 로딩되지 않으면 최대 3초까지 텍스트를 안 보여주다가 로딩이 완료되면 웹 폰트를 적용해서 보여줍니다.
(FOIT와 동일하게 작용)
※ FOIT와 FOUT
FOIT(Flash Of Invisible Text)는 브라우저가 웹 폰트를 다운로드하기 전에 텍스트가 보이지 않는 현상
FOUT(Flash Of Unstyled Text)는 브라우저가 웹 폰트를 다운로드하기 전에 텍스트가 대체 폰트로 렌더링 되는 현상
3. 프리로딩 (PreLoad)
link태그 rel속성에 preload를 사용하면 다른 리소스들보다 빨리 로딩합니다.
css파일 보다 웹 폰트 파일을 먼저 다운로드해서 FOIT와 FOUT 기간을 최소화할 수 있죠.
<link rel="preload" href="url경로" as="font" type"font/타입" crossorigin/>
4. Subset Font
불필요한 글자 제거 후 사용할 글자만 남겨둔 폰트입니다. 적용은 아래 페이지에서 참조 바랍니다.
https://d2.naver.com/helloworld/4969726
<참조>
최적화 5가지 방법 :
https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
https://webclub.tistory.com/261
'TIL' 카테고리의 다른 글
| Callback 함수 (1) | 2023.08.06 |
|---|---|
| 동기(Synchronous)와 비동기(Asynchronous) (1) | 2023.08.03 |
| AJAX란 무엇인가? (1) | 2023.07.31 |
| SSR(Server Side Rendering)과 CSR(Client Side Rendering) (0) | 2023.07.07 |
| HTML5 시맨틱 태그와 웹 표준을 지키는 이유 (0) | 2023.04.21 |