차근차근 개발중
[FRONT-END] 웹폰트란? 본문
📍. 웹폰트란?
- 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 폰트를 사용할 수 있게하는 기술이다.
📍. 웹폰트 기본 사용법
1. google fonts를 이용해서 웹폰트
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<style>
.nanum-pen{
font-family: "Nanum Pen Script", cursive;
font-weight: 200;
font-style: normal;
}
</style>
</head>
<body>
<p class="nanum-pen">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam ratione laborum praesentium molestias tempore sit dignissimos repellendus!
Reprehenderit, sed, impedit, rem corporis quae qui voluptatem eaque illum dolorum blanditiis iusto?
</p>
</body>
</html>
2. @font-face
- font-family: 사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋다.
- src: 폰트 파일의 경로와 폰트의 형식을 지정한다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정한다.
@font-face 규칙을 설정한 다음 웹 폰트가 필요한 선택자(selector)의 font-family 속성에서 사용할 웹 폰트의 이름을 호출해 사용한다. 만약 웹 폰트 로딩이 실패하면 다음에 선언된 폰트가 렌더링된다. 이 폰트를 폴백 폰트(fallback font)라 한다.
📍. 웹 폰트의 문제점
- 웹페이지 접속시 외부 웹 폰트 링크로 정의된 해당 폰트 파일을 다운로드 한다. 하지만 그리기(paint) 단계에서 웹 폰트 파일처럼 외부 링크로 연결된 파일의 다운로드가 완료되지 않았으면 브라우저는 해당 자원을 사용하는 콘텐츠의 렌더링을 차단한다. 그러므로 글자가 표출되지않는 현상이 일어나기도한다.
📍.웹폰트 최적화 방법
1. 폰트 파일의 용량 줄이기
- woff2.0형식 폰트 : 압축된 폰트 형식
- 서브셋 폰트 : 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트다.
- unicode-range : 유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성
2. 텍스트가 항상 보이게 하기
- 브라우저의 렌더링 차단 처리 방식
- CSS의 font-display 속성을 사용하면 외부 라이브러리를 사용하지 않아도 웹 폰트의 로딩 상태에 따른 동작 을 설정
3. Font Style Matcher로 폰트 간 차이 줄이기
- 폰트 속성을 다운로드 전후 상태에 맞게 CSS에 작성하면 FOUT 현상이 발생할 때 레이아웃이 깨져 보이는 현상을 막을 수 있다.
4. preload 옵션으로 먼저 로딩하기
- <link>태그의 rel 속성에 preload 옵션을 사용하면 해당 리소스를 다른 리소스보다 빨리 로딩된다
단, 중요도가 높고 먼저 렌더링되어야 하는 리소스만 preload 옵션으로 지정하는 것이 좋다.
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap">