고정 헤더 영역
상세 컨텐츠
본문
웹사이트나 블로그를 디자인할 때 가장 기본이 되면서도 큰 영향을 주는 요소 중 하나는 바로 ‘폰트’입니다.
폰트 하나만 바꿔도 분위기가 확 달라지니까요.
그래서 오늘은 웹디자인을 하는 분들이라면 꼭 알아야 할 무료 웹폰트 서비스,
Google Fonts 에 대해 소개하고, 실제 활용 방법까지 자세히 알려드릴게요!
Google Fonts란?
Google Fonts(구글 폰트)는 구글에서 무료로 제공하는 오픈소스 웹폰트 서비스입니다.
- 1,600개 이상의 다양한 폰트를 자유롭게 사용할 수 있어요.
- 영어뿐 아니라 한글, 일본어, 중국어 등 다양한 언어를 지원합니다.
- 개인/상업적 용도 모두 사용 가능! 라이선스 걱정 없이 자유롭게 쓸 수 있어요.
📌 가장 큰 장점은?
웹사이트에 쉽게 적용 가능하고, 속도 최적화가 잘 되어 있다는 점!
Google Fonts의 주요 특징
✅ 무료 & 오픈소스
– 라이선스 문제 없이 누구나 사용 가능!
✅ 다국어 지원
– Noto, Nanum, Roboto 등 다양한 언어와 스타일을 지원합니다.
✅ 빠른 적용
– HTML이나 CSS에 몇 줄만 추가하면 바로 사용 가능!
✅ 실시간 미리보기
– 원하는 텍스트로 폰트를 직접 확인할 수 있어요.
✅ 다운로드 가능
– 웹폰트 뿐만 아니라 로컬에서도 사용 가능합니다.
✨ Google Fonts 사용 방법
① 원하는 폰트 찾기
Google Fonts 사이트에 접속한 뒤,
상단 검색창이나 카테고리 필터를 통해 원하는 폰트를 찾아보세요.
예시: Noto Sans KR, Roboto, Lato, Nanum Gothic 등
② 폰트 스타일 선택
원하는 폰트를 클릭하면 다양한 굵기(weight)와 스타일(italic 등)을 선택할 수 있어요.
예를 들어 Noto Sans KR은 100 ~ 900까지 다양한 두께를 제공합니다.
③ HTML에 링크 추가
<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> 안에 넣으면 웹페이지에서 바로 사용할 수 있어요.
④ CSS에서 적용하기
body {
font-family: 'Noto Sans KR', sans-serif;
}
폰트를 여러 요소에 다양하게 지정할 수 있습니다.
💾 로컬 설치도 가능!
Google Fonts는 웹에서만 쓰는 게 아닙니다.
원하는 폰트를 다운로드해 로컬 컴퓨터에서도 사용할 수 있어요.
- 폰트 페이지 → 상단 우측 “Download family” 버튼 클릭
- 다운로드 후 폰트를 설치하면 워드, 포토샵 등에서도 사용 가능!
📌 추천 한글 폰트
| 폰트명 | 특징 |
| Noto Sans KR | 깔끔하고 모던한 고딕체, 가독성 우수 |
| Nanum Gothic | 부드럽고 전통적인 느낌의 고딕체 |
| Nanum Myeongjo | 고전적인 분위기의 명조체 |
Google Fonts는 웹디자인, 블로그, 쇼핑몰, 포트폴리오 등
어떤 사이트든 디자인 완성도를 높일 수 있는 최고의 무료 도구입니다.
폰트 하나 바꾸는 것만으로도 분위기와 사용자 경험이 확 달라지는 걸 느껴보세요!
지금 바로 Google Fonts에 접속해 원하는 폰트를 찾아보고, 나만의 스타일을 완성해보세요 😊
👉 https://fonts.google.com/
'홈페이지 제작 > CSS' 카테고리의 다른 글
| CSS란? 홈페이지 만드는 사람들이 꼭 알아야 할 기본 지식 (1) | 2025.06.08 |
|---|---|
| 홈페이지 제작시 무료로 사용하는 아이콘 세상, Google Icons (Material Symbols) 완벽 가이드 (3) | 2025.06.06 |
| 홈페이지 제작 시 세련된 한글 폰트 사용하기: Noto Sans KR 적용 방법 & 소개 (0) | 2025.06.05 |
| CSS로 텍스트에 그라데이션 주는 방법 (with 예제 코드) (1) | 2025.06.05 |
| CSS로 배경에 그라데이션 주는 방법 (with 예제 코드) (0) | 2025.06.05 |