✨ 구글 폰트로(Google Fonts) font-family 연결하기

프론트엔드 공부/HTML & CSS

✨ 구글 폰트로(Google Fonts) font-family 연결하기

버텨견뎌즐겨 2025. 4. 5. 22:18

웹사이트에서 구글 폰트는 무료로 제공되고, 다양한 스타일을 지원해서 프론트엔드 개발자나 디자이너들에게 아주 유용한 리소스입니다. 이번 포스팅에서는 HTML 문서에 구글 폰트를 적용하는 가장 기본적인 방법을 소개할게요.

✅ 1. 구글 폰트 웹사이트 접속

👉 https://fonts.google.com/로 접속합니다.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글에서 제공하는 다양한 폰트를 검색하고 미리보기로 볼 수 있어요. 원하는 폰트를 선택해 사용 준비를 해볼게요.

✅ 2. 폰트 선택 후 Embed 코드 복사

원하는 폰트를 클릭합니다. (예: Noto Sans, Roboto, Pretendard 등)
Regular, Bold, Italic 등 원하는 스타일을 체크합니다.

페이지 우측 상단의 "Get embed code" 또는 “</> Embed” 탭에서 제공되는 <link> 태그를 복사합

✅ 3. <head> 태그 안에 복사한 코드 붙여넣기

HTML 문서의 <head> 안에 붙여넣어주세요. 이렇게 하면 해당 웹페이지에서 구글 폰트를 불러올 수 있어요.

처음 두 줄(rel="preconnect")은 브라우저에 글꼴 파일이 있는 서버에 미리 연결하라고 알려 로딩 속도를 높입니다.
마지막 줄(rel="stylesheet")은 실제 Google Fonts 스타일시트를 웹페이지에 적용합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Weekly Codeit</title>
    <meta charset="utf-8" />
    <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=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
  </head>
</html>

✅ 4. CSS에서 font-family 사용하기

이제 스타일에 적용하면 됩니다. 구글 폰트 사이트에서 font-family 속성을 CSS에 복사해서 사용

<div style="font-family: 'Noto Sans KR', sans-serif"></div>

💡 Tip: fallback 폰트인 sans-serif는 폰트를 불러오지 못할 경우 대체로 사용됩니다.

📌 전체 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Google Fonts 예제</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans', sans-serif;
    }
  </style>
</head>
<body>
  <h1>구글 폰트 적용 예제</h1>
  <p>이 문장은 Noto Sans 폰트로 표시됩니다.</p>
</body>
</html>

⚡ 추가 팁

여러 폰트를 한 번에 불러올 수도 있어요:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto&display=swap" rel="stylesheet">

@import 방식으로 CSS 파일 내에서 불러오는 방법도 있지만 <link> 태그를 사용하는 것이 더 권장됩니다 (성능 측면에서)

📝 마무리하며

이렇게 간단한 몇 단계만 거치면 HTML 페이지에 원하는 구글 폰트를 적용할 수 있다는 점,
그리고 font-family 하나만으로도 웹사이트의 분위기를 손쉽게 바꿀 수 있다는 사실을 정리해보았습니다.

저처럼 프론트엔드 개발을 준비하시는 분들께 조금이나마 도움이 되셨길 바랍니다 😊

'프론트엔드 공부 > HTML & CSS' 카테고리의 다른 글

🎬 <video>, <audio>, <iframe> 태그 정리 (0)	2025.04.09
🧾 <Table> 태그 개념과 스타일링 방법 (0)	2025.04.09
🔗 <a> 태그로 하이퍼링크 만들기 (0)	2025.04.09
🔗 HTML(Hypertext Markup Language)란? (0)	2025.04.09
🎨 CSS 색상 정리 \| HEX, 키워드, 표준 색상 (0)	2025.04.05

현재글✨ 구글 폰트로(Google Fonts) font-family 연결하기

프론트엔드 개발자로 성장하기