반응형

HTML 파일에서 CSS를 사용해 Font 스타일을 설정하는 방법을 2개 토픽으로 알아보자.

 

1. Google Fonts 와 같은 font 제공 서비스에서 제공하는 font에 대한 정보를 CSS 파일로 확보한 뒤 font 파일에 접근하기.

 

Google Fonts의 검색에서 "Gugi"를 선택해봤다. 우측의 "Get font"를 누른다.

Gugi 선택

 

우측의 Get embed code를 클릭한다.

Get embed code 선택

 

"Embed code in the <head> of your html" 밑의 코드를 복사해서 html 파일의 <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=Gugi&display=swap" rel="stylesheet">
  • <link rel="preconnect" href="https://fonts.googleapis.com"> : 브라우저가 fonts.googleapis.com 서버에 미리 연결하도록 요청해서, 서버와의 DNS 조회 및 SSL 연결 시간을 줄여 font를 더 빨리 로드하도록 한다.
    • fonts.googleapis.com 서버는 폰트 설정(CSS 파일)을 제공하는 서버이다.
  • <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: fonts.gstatic.com 서버에 미리 연결하고, crossorigin 속성을 설정한다. Font 파일을 빠르게 로드하면서 CORS 문제를 방지하는 역할이다.
    • fonts.gstatic.com 서버는 Google Fonts의 실제 font 파일을 제공하는 고속 서버이다.
    • Google은 전 세계에 분산된 서버(CDN - Content Delivery Network)를 사용해 font를 빠르게 제공한다. fonts.gstatic.com은 Google의 CDN에 연결된 서버로, 가까운 위치의 서버에서 font 파일을 다운로드받을 수 있도록 최적화된다.
    • Font 파일은 CORS를 통해 로드된다. 그래서 crossorigin 속성을 설정해 폰트 파일을 문제없이 가져오도록 해야 한다. Font 파일은 웹 브라우저의 보안 정책상 반드시 CORS 허용 설정이 되어야 다른 출처에서 사용할 수 있기 때문이다.
  • <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">: Google Fonts의 Gugi font(CSS 파일)를 불러온다.
    • 동작 과정
      •  HTML 파싱: 브라우저가 <link> 태그를 만나면 **href**에 지정된 URL인 https://fonts.googleapis.com/css2?family=Gugi&display=swap로 요청(Request)을 보낸다.
      • fonts.googleapis.com 서버는 요청된 폰트의 설정 정보를 담은 CSS 파일을 반환한다.
        • 이 CSS 파일에는 폰트 파일(실제 리소스)이 어디에 있는지 @font-face로 정의되어 있다. 
      • 브라우저는 CSS 파일을 확인한 후, 폰트 파일이 저장된 fonts.gstatic.com에 접근해 실제 폰트 파일(.ttf)을 다운로드한다.
      • 폰트 파일이 모두 로드되면, 지정된 텍스트에 폰트를 적용한다.
        • 이 과정에서 display=swap 옵션 덕분에 폰트 로딩 전에는 기본 폰트(fallback font)를 사용하다가, 폰트 로딩이 완료되면 화면에 적용된다.
      • (CSS 파일 예시)
@font-face {
  font-family: 'Gugi';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/gugi/v10/A2BVn5dXywshVKG1QnWJovb6aFU.ttf) format('truetype');
}

 


<style> 태그에 아래 예시와 같이 font-family를 설정한다.

html {
    font-family: "Gugi";
    font-weight: 400;
    font-style: normal;
}

 

Gugi를 적용한 HTML 예시

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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=Gugi&display=swap" rel="stylesheet">
</head>
<style>
    html {
        font-family: "Gugi";
        font-weight: 400;
        font-style: normal;
    }

    .normal {
        font-weight: normal;
    }

    .bold {
        font-weight: bold;
    }

    .custom {
        font-weight: 900;
    }
</style>

<body>
    <p>안녕하세요</p>
    <p class="normal">안녕하세요</p>
    <p class="bold">안녕하세요</p>
    <p class="custom">안녕하세요</p>
</body>

</html>

위 코드는 아래와 같이 화면을 렌더한다.

 

※ 참고: fonts.googleapis.com에서부터 로드된 CSS 파일의 @font-face의 역할

@font-face는 CSS 규칙 중 하나로, 웹페이지에서 custom font를 사용할 수 있게 해준다. 이 규칙을 사용하면 로컬 font가 아닌 외부 font를 가져와 웹페이지에 적용할 수 있다.

역할

  • Font 파일 선언:  웹페이지에서 사용할 font 파일을 지정한다. 다양한 형식(woff2, woff, ttf, eot 등)을 지원한다.
  • Custom font 이름 설정: font에 이름(font-family)을 부여해 나중에 CSS에서 해당 font를 사용할 수 있게 한다.
  • 다양한 font 스타일 정의: font 굵기(font-weight), 스타일(font-style), 문자 범위(unicode-rage, 선택 사항) 등을 지정할 수 있다.

기본 문법

@font-face {
    font-family: 'CustomFont'; /* 사용할 font의 이름 */
    src: url('CustomFont.woff2') format('woff2'),
         url('CustomFont.woff') format('woff'); /* font 파일 경로 및 형식 */
    font-weight: normal; /* font 굵기 */
    font-style: normal;  /* font 스타일 */
}

 

 

2. 직접 @font-face를 HTML <style> 태그에 정의해서 Custom Font를 쓰는 방법

@font-face 규칙을 직접 <style> 태그에 입력해서 사용하는 방법이다.

 

방법 1. 외부 서버에서 제공하는 font file을 사용할 수 있도록 @font-face를 직접 명시하기

 

눈누에서 제공하는 "쿠키런 글꼴" font를 사용해보자.

https://noonnu.cc/font_page/322

 

눈누

쿠키런 - 데브시스터즈(주)

noonnu.cc

 

우측의 "웹폰트로 사용"의 @font-face 코드를 복사한다.

 

복사한 코드를 아래처럼 HTML 파일에 붙여넣는다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "GmarketSansMedium";
            src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
            font-weight: normal;
            font-style: normal;
        }

        p {
            font-family: "GmarketSansMedium";
        }

        .normal {
            font-weight: normal;
        }

        .bold {
            font-weight: bold;
        }

        .custom {
            font-weight: 900;
        }
    </style>
</head>

<body>
    <p>안녕하세요</p>
    <p class="normal">안녕하세요</p>
    <p class="bold">안녕하세요</p>
    <p class="custom">안녕하세요</p>

</body>

</html>

font-family는 "GmarketSansMedium"로 정의되있고, p에 적용하였다.

위 코드는 아래와 같이 화면을 렌더한다.

 

 

방법 2. 로컬에 저장되있는 font 파일을 사용하도록 @font-face에서 직접 명시하기

로컬(웹 페이지의 디렉터리 기준)에 font 파일이 있다면, 이를 사용할 수 있다.

 

아래는 인터넷에서 "온글잎 박다현체" font 파일을 다운로드해서 로컬에서 사용한 예시이다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "Ownglyph_ParkDaHyun";
            src: url("./온글잎박다현체.ttf") format("woff");
            font-weight: normal;
            font-style: normal;
        }

        p {
            font-family: "Ownglyph_ParkDaHyun";
        }

        .normal {
            font-weight: normal;
        }

        .bold {
            font-weight: bold;
        }

        .custom {
            font-weight: 900;
        }
    </style>
</head>

<body>
    <p>안녕하세요</p>
    <p class="normal">안녕하세요</p>
    <p class="bold">안녕하세요</p>
    <p class="custom">안녕하세요</p>

</body>

</html>

위 코드는 아래와 같이 화면을 렌더한다.

 

 

요약

HTML 파일에서 CSS를 사용해 Font 스타일을 설정하는 방법을 아래와 같이 나눠서 알아보았다.

  1. Font 제공 서비스에서 제공하는 font 관련 정보(CSS 파일)를 먼저 확보한 다음, 해당 CSS 파일에 명시된 정보를 통해 외부 서버에 위치한 font 파일에 접근하기
  2. @font-face 직접 명시하기
    1. 외부 서버에서 제공하는 font file을 사용할 수 있도록 @font-face에 직접 명시하기
    2. 로컬에 저장되있는 font 파일을 사용하도록 @font-face에 직접 명시하기
반응형
저작자표시

'HTML&CSS' 카테고리의 다른 글

[HTML&CSS] CSS Box Model  (0) 2024.12.18
[HTML&CSS] HTML Boilerplate & HTML 기본 구조  (2) 2024.12.16

+ Recent posts

티스토리툴바