[HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기

테스트 환경

React + Vite

 

 

 

 

※. TTF vs OTF 차이

폰트 구조
TTF는 오래된 폰트 형식으로, 덜 복잡한 비트맵으로 구성되어 있어 일부 오래된 시스템과의 호환성이 더 좋을 수 있습니다.
OTF는 TTF의 확장 버전으로, 스플라인 규격에 대한 추가 지원(주로 베지어 곡선) 및 자체적인 스케일링 및 변환 특성이 있어 디자인과 출력 품질이 더 우수할 수 있습니다.

 

파일 크기
일반적으로 OTF 폰트 파일은 TTF 파일보다 크기가 큰 편이므로 웹 성능에 영향을 미칠 수 있습니다. 웹 사이트의 로딩 시간이 중요한 요소인 경우, 더 작은 파일 크기의 TTF가 더 나을 수 있습니다.

 

호환성
대부분의 모던 웹 브라우저는 TTF와 OTF를 모두 지원합니다. 그러나 일부 구식 시스템이나 오래된 브라우저에서는 TTF가 더 널리 지원될 수 있습니다.

 

기능성
OTF는 표준적으로 더 많은 글리프와 타이포그래픽 옵션을 제공합니다. 이것은 다국어 지원, 리가처(서로 연결된 문자), 스와시(장식 문자) 등과 같은 고급 기능을 사용하려는 경우 OTF가 더 나을 수 있음을 의미합니다

 

 

 

 

1. 파일 준비

https://corp.gmarket.com/fonts/

G마켓 - 쇼핑을 바꾸는 쇼핑

먼저 폰트 파일을 준비해줍니다.

 

테스트 폰트 파일은 상업적으로 무료로 사용 가능한 지마켓 산스를 사용하였습니다.

 

 

 

React는 public - fonts 디렉토리에 파일을 이동하였습니다.

 

Vanilla HTML의 경우 css파일이 있는 경로에 fonts 디렉토리를 생성 후 폰트 파일을 위치시켜주시면 됩니다.

 

 

 

 

2. CSS 설정

@font-face로 폰트 선언하기

@font-face {
    font-family: 'GmarketSans';
    src: url('/fonts/GmarketSansBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('/fonts/GmarketSansLight.otf') format('opentype');
    font-weight: 300; /* light는 일반적으로 300의 폰트 가중치에 해당합니다. */
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('/fonts/GmarketSansMedium.otf') format('opentype');
    font-weight: 500; /* medium은 일반적으로 500의 폰트 가중치에 해당합니다. */
    font-style: normal;
}

먼저 적용할 font를 불러와서 사용할 수 있도록 @font-face로 설정해주어야 합니다.

 

 

일반적으로 font를 다운받으시면 하나의 파일로 되어 있지 않고, Bold, light 등의 여러 굵기로 나뉘어 있을 것입니다.

 

@font-face를 통해 이것을 하나로 묶어주는 작업도 진행합니다.

 

 

 

폰트 선언 내용

font-familly는 실제 폰트 사용 시 이름을 지정합니다.

 

src는 폰트가 위치한 경로 및 글꼴 타입을 지정합니다.

 

font-weight는 여러 폰트를 familly로 묶었을 때 수치 또는 이름(ex. bold)을 통해 불러올 수 있도록 지정해줍니다.

일반적으로 light: 300, nomal: 500, bold: 700 으로 지정합니다. 

 

font-style은 이텔릭체, 기울임꼴, 보통체 등을 알려주는 역할입니다.

 

 

 

3. Font 적용하기

* {
    font-family: 'GmarketSans';
}

h1 {
    font-size: 36px;
    font-weight: 700;
}

h2 {
    font-size: 28px;
    font-weight: 500;
}

마지막으로 폰트를 적용시켜보겠습니다.

 

만약 모든 웹 페이지에서 동일한 폰트를 사용하고 싶다면, * { font-familly: }를 통해서 적용시킬 수 있습니다. 

 

 

 

h1 {
    font-family: 'GmarketSans';
    font-size: 36px;
    font-weight: 700;
}

특정 태그만 폰트를 적용시키고 싶다면 위와 같이 각 집합에 font-familly를 적용시켜 주시면 됩니다.

 

 

 

잘 적용되어 동작하는 것을 확인할 수 있습니다.