구글웹폰트 사용 방법
구글웹폰트 서비스 유아이는 놀라울 정도로 자주 변경 됩니다.
시간이 조금만 지나도 아래 매뉴얼과 유아이가 달라질 수 있습니다.
그래도 얼추 맥락은 비슷하니까 센스있게 찾아서 사용할 수 있을 것입니다.
URL
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 웹폰트 다운로드 받아서 내 컴에 설치하기
포토샵과 같은 로컬 디자인 프로그램에서 구글 폰트를 사용하려면 CDN 링크가 아닌, 폰트 파일 자체를 컴퓨터에 설치해야 합니다. Noto Sans KR을 설치하는 방법을 아주 쉽게 알려드릴게요.
1단계: 구글 폰트에서 파일 다운로드하기
Google Fonts - Noto Sans KR 페이지에 접속합니다.
우측 상단에 있는 [Get font] 버튼을 클릭합니다.
버튼은 좌측 상단에 있을수도 있습니다.
바뀐 화면의 우측 상단에서 [Download all] 버튼을 클릭합니다.
저장합니다.
다운로드된 noto-sans-kr.zip 파일의 압축을 풉니다.
2단계: 컴퓨터에 폰트 설치하기 (Windows/Mac)
압축을 풀면 여러 개의 파일이 나오는데, 보통 static 폴더 안에 있는 .ttf 또는 .otf 파일을 설치하면 됩니다.
- Windows: 1. 설치할 폰트 파일들을 모두 선택합니다. 2. 마우스 오른쪽 버튼을 누르고 [모든 사용자용으로 설치] 또는 **[설치]**를 클릭합니다.
- Mac: 1. 폰트 파일을 더블 클릭합니다. 2. 나타나는 미리보기 창에서 [설치] 버튼을 클릭합니다.
3단계: 포토샵에서 확인하기
- 설치가 끝났다면 포토샵을 실행합니다. (이미 실행 중이었다면 껐다가 다시 켜는 것이 가장 확실합니다.)
- **문자 도구(Type Tool, 단축키 T)**를 선택합니다.
- 상단 옵션 바의 폰트 검색창에 **"Noto Sans KR"**을 입력하여 선택합니다.
💡 설치할 때 주의할 점
- 파일 형식: 구글 폰트는 보통 .ttf 형식을 제공합니다. 포토샵에서 사용하기에 가장 안정적입니다.
- 폰트가 안 보인다면? 폰트를 방금 설치했는데 목록에 없다면 포토샵을 완전히 종료 후 재실행해 보세요.
- Adobe Fonts 활용: 만약 어도비 정품 구독 중이라면, 구글 폰트 사이트에 갈 필요 없이 포토샵 내부의 폰트 메뉴에서 Adobe Fonts 아이콘을 눌러 클릭 한 번으로 활성화할 수도 있습니다.
사용한 프롬프트
포토샵에서 구글웹폰트를 사용하고 싶어요.
구글웹폰트에서 Noto sans kr 폰트를 다운로드 받아서 컴퓨터에 설치하는 방법을 알려주세요.
구글 웹폰트에서 CDN 코드 가져오기
구글 폰트 사이트의 UI가 자주 업데이트되어 처음 접속하면 링크를 찾는 것이 조금 헷갈릴 수 있습니다. Noto Sans KR을 예제로, 현재 버전의 웹사이트에서 정확한 CDN 코드를 복사하는 과정을 단계별로 설명해 드릴게요.
구글 폰트에서 CDN 코드 가져오기 (5단계)
1. 폰트 검색 및 선택
Google Fonts 공식 사이트에 접속합니다.
검색창에 **"Noto Sans KR"**을 입력하고 결과로 나온 폰트 카드를 클릭합니다.
2. 필요한 두께(Styles) 선택
화면을 아래로 내리면 Styles 섹션이 나옵니다.
- 웹페이지에서 사용할 글자 두께(예: Regular 400, Bold 700 등) 옆의 [+] Select (두께 이름) 버튼을 클릭합니다.
- 선택할 때마다 우측 상단의 장바구니 아이콘(Selected families)에 숫자가 올라갑니다.
- 위 매뉴얼이 안된다면 폰트를 선택하고 좌측 하단 겟폰트 버튼을 탭 합니다.
3. 장바구니(Selected families) 열기
우측 상단에 있는 'Selected families' 아이콘(정사각형 3개와 플러스 기호 모양)을 클릭합니다. 그러면 오른쪽에 사이드바 창이 열립니다.
안된다면 겟엠비디드 코드 버튼을 탭 합니다.
4. 태그 방식 선택 (@import vs <link>)
사이드바의 'Embed' 탭에서 두 가지 방식 중 하나를 선택할 수 있습니다.
- <link> 방식 (권장): HTML 파일의 <head> 부분에 넣을 때 사용합니다. 성능상 가장 유리합니다.
- @import 방식: CSS 파일(.css) 내부에 직접 넣고 싶을 때 사용합니다.
5. 코드 복사하기
"Web" 섹션 아래에 있는 검은색 배경의 코드 박스 내용을 복사합니다.
코드 적용 예시
복사한 코드는 크게 두 부분으로 나뉩니다. 각각 알맞은 위치에 붙여넣으세요.
① 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=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">② CSS에 붙여넣을 부분 (Style 영역)
이 코드는 불러온 폰트를 실제 글자에 입히는 명령입니다.
font-family: "Noto Sans KR", sans-serif;💡 주의사항: 'Variable' 폰트란?
최근 Noto Sans KR은 Variable(가변) 폰트로 제공됩니다. 굵기를 wght@100..900처럼 범위로 설정하면, 별도로 여러 개를 선택할 필요 없이 하나의 파일로 모든 굵기를 자유롭게 조절할 수 있어 효율적입니다.
사용한 프롬프트
구글웹폰트 사이트에서 CDN 링크 복사해 오는 방법을 Noto Sans kr 폰트를 예제로 알려주세요.
구글웹폰트 내 프로젝트에 CDN으로 사용하기
구글 폰트를 CDN(Content Delivery Network) 방식으로 HTML에 적용하는 방법은 매우 간단합니다.
대중적으로 많이 쓰이는 'Noto Sans KR' (본문용으로 최적화된 한글 폰트)을 예시로 단계별 가이드를 드릴게요.
1단계: HTML <head>에 링크 추가하기
HTML 파일의 <head>와 </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=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">2단계: CSS로 폰트 적용하기
폰트를 불러왔다면, 이제 어떤 요소에 이 폰트를 사용할지 CSS에서 지정해야 합니다. 모든 글자에 적용하고 싶다면 body 태그에 설정하세요.
/* CSS 파일 또는 <style> 태그 내부에 작성 */
body {
font-family: "Noto Sans KR", serif;
font-optical-sizing: auto;
font-style: normal;
}전체 예시 코드
위의 단계들을 합친 전체 HTML 구조입니다. 바로 복사해서 실행해 보실 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>구글 폰트 적용 샘플</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=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<style>
/* 2. CSS 적용 */
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
padding: 20px;
}
h1 {
font-weight: 700; /* 굵은 글씨 */
}
p {
font-weight: 400; /* 일반 글씨 */
}
</style>
</head>
<body>
<h1>안녕하세요, 구글 폰트 적용 예시입니다.</h1>
<p>이 문장은 Noto Sans KR 폰트가 적용된 상태입니다.</p>
</body>
</html>💡 팁: 왜 3개의 링크가 있나요?
구글 폰트에서 제공하는 코드를 보면 <link>가 3줄입니다.
- preconnect: 폰트가 저장된 서버와 미리 연결을 시도하여 로딩 속도를 높여줍니다.
- stylesheet: 실제 폰트 데이터가 담긴 CSS 파일을 가져옵니다.
AI 프롬프트
구글웹폰트를 CDN으로 사용할거예요. 특정 폰트 하나를 샘플로 내 HTML에서 사용하는 방법을 알려주세요.
'New' 카테고리의 다른 글
| 모던 UI디자인에서 가장 많이 사용되는 한글 구글 웹폰트 몇가지 (1) | 2025.12.31 |
|---|---|
| 2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지 (0) | 2025.12.22 |
| 사이트에서 이미지 다운로드 받는 방법 (0) | 2025.12.22 |
| delete-file (0) | 2025.12.11 |
| GTQ GTQi 시험 프로그램 버전 확인 방법 (0) | 2025.12.06 |