[HTML & CSS] Google Fonts를 CSS에 적용하는 방법

개요

웹사이트에서 멋진 폰트를 사용하고 싶다면 Google Fonts를 활용하는 것이 가장 좋은 방법입니다.
Google Fonts는 무료로 제공되며, CSS에 간단히 추가할 수 있어 많은 개발자들이 애용합니다.
이 글에서는 Google Fonts를 HTML과 CSS에 적용하는 방법을 두 가지 방식으로 소개하겠습니다.

1. `<link>` 태그를 사용한 적용 방법

가장 일반적인 방법은 HTML의 <head> 태그에 <link>를 추가하는 것입니다.

사용 방법

Google Fonts에 접속합니다.
원하는 폰트를 검색한 후 “Select style”을 클릭합니다.
“Embed”에서 <link> 태그를 복사합니다.
HTML의 <head> 태그에 붙여넣습니다.

예제 코드

아래는 Roboto 폰트를 적용하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts 적용</title>
    <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1>구글 폰트 적용 완료!</h1>
</body>
</html>

📌 font-family: 'Roboto', sans-serif; 를 추가하면 글꼴이 적용됩니다!
이 방법은 브라우저에서 폰트를 빠르게 로드할 수 있어 가장 추천하는 방식입니다.

2. `@import`를 사용한 적용 방법

HTML <link> 대신 CSS 파일에서 @import를 활용하여 Google Fonts를 불러올 수도 있습니다.

사용 방법

@import를 이용하면 CSS 파일에서 직접 폰트를 가져올 수 있습니다.

예제 코드 (`style.css`)

@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>');

body {
    font-family: 'Roboto', sans-serif;
}

이 방법은 HTML 파일이 아닌 CSS 파일 내에서 관리할 수 있다는 장점이 있습니다.
하지만 <link> 태그 방식보다 속도가 조금 느릴 수 있으므로 주의해야 합니다.

추가 설정 (굵기 및 스타일 적용)

Google Fonts에서는 폰트 굵기(weight)나 스타일(italic)도 조정할 수 있습니다.

굵기 적용 (`font-weight`)

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* 굵은 글씨 */
}

이탤릭 적용 (`font-style`)

p {
    font-family: 'Roboto', sans-serif;
    font-style: italic; /* 기울임 */
}

📌 Google Fonts에서 여러 스타일을 선택해 적용하면 더욱 다양한 효과를 낼 수 있습니다!

어떤 방식을 선택해야 할까?

적용 방법	장점	단점
`<link>` 태그 사용	속도가 빠르고 캐싱 최적화 가능	HTML 코드에 추가 필요
`@import` 사용	CSS 파일에서 관리 가능	속도가 다소 느릴 수 있음

✔ 속도를 고려한다면 <link> 태그 방식 추천!
✔ CSS 파일에서 일괄적으로 관리하고 싶다면 @import 방식도 가능!