Back
Featured image of post HTML에 폰트 적용하는 방법
Style

HTML에 폰트 적용하는 방법

font face와 cdn을 사용해 웹 폰트 적용해보기

웹 폰트

웹 폰트를 적용하는 방법은 크게 2가지가 있다. 하나는 cdn을 이용하는 방법, 나머지 하나는 직접 폰트 파일을 경로에 미리 삽입하여 @font-face로 정의하는 방법이다.

CDN을 활용한 방법

font

구글 폰트 등과 같이 cdn을 제공해주는 사이트에서 폰트를 적용하는 방법이다. 너무나 간단한게 장점이고 단점으로는 직접 파일을 적용하는 방법보다 로드 속도가 느리다. 적용 방법은 직접 cdn 링크를 html에 삽입하고, css에서 font-family로 적용하거나, css import를 통해 적용하는 방법이 있다.

/* cdn import */
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap');

/* 폰트 적용 */
body {
    font-family: 'Dongle', sans-serif;
}

폰트파일 직접 적용

직접 폰트 파일을 서비스 디렉토리에 넣어주고 @font-face로 불러오는 방법이 있다. 첫 번째 방법보다 번거롭지만 해당 폰트가 설치되어있지 않는 사용자들도 모두 적용할 수 있기 때문에 안정적이다.

먼저 폰트 파일(ttf, eot, woff 등)을 직접 특정 디렉토리에 넣는다. 포맷에 따라 지원하는 브라우저가 천차만별이기 때문에 가능하면 WOFF, WOFF2, OTF 파일을 사용하는 것이 좋다. file

파일을 준비했다면 이제 css 코드로 해당 폰트를 정의해주면된다. 파일 포맷에 따른 예시는 다음과 같다.

  • font-family : 적용하고자 하는 폰트의 이름
  • font-style : 폰트의 기본 스타일 (선택사항)
  • font-weight : 폰트의 기본 굵기 (선택사항)
  • src : 해당 폰트 파일의 위치
    • url : 경로
    • format : 폰트 파일 형식
/*fonts.css*/
@font-face {
    font-family: 'font-name'; /*font 이름*/
    font-style: 'normal'; /* font 스타일 정의 (기울임, 일반) */
    font-weight: 400; /* font 굵기 정의 */
    /* 브라우저&디바이스 환경에 따른 font 파일 위치 정의 */
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'),
        /*  Modern Browsers */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'),
        /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* 폰트 적용 */
body {
    font-family: 'font-name';
}

참고자료

© 2020 - 2023 Jiny