Readymade · 폰트

Source Serif 4

어도비 본문 세리프. 크기에 맞춰 모양이 바뀌는 가변 서체

라틴
제작 Frank Grießhammer
굵기 가변 200–900
이탤릭
광학 크기 축
한글 없음
SIL OFL 1.1

광학 크기48굵기700크기72px

The quick brown fox jumps

바로 넣기

공식 페이지에서 받기

HTML 의 <head> 에 넣거나 CSS 맨 위에서 불러온 뒤, 쓰고 싶은 곳에 font-family 를 적습니다.

HTML <link>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap">

CSS @import

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

CSS font-family

font-family: "Source Serif 4", serif;

코딩 에이전트에 붙여 넣기

Claude Code·Codex 에 그대로 붙이면 지금 프로젝트(Next.js·Vite 등)를 보고 이 폰트를 알맞은 방법으로 넣습니다. 한글 서브셋·display swap·라이선스 파일 위치까지 담았습니다.

지시문 보기

이 프로젝트에 "Source Serif 4"(Source Serif 4) 폰트를 넣어 줘.

## 폰트 정보
- 분류: 라틴 · 굵기 200/300/400/500/600/700/800/900 (가변) · 한글 없음(라틴 전용)
- 라이선스: OFL-1.1 — 상업 사용 가능 · 웹·앱 임베드 가능 · 수정·재배포 가능(수정본은 이름을 바꾸고 라이선스 동봉) · 폰트 파일 단독 판매만 금지
- 라이선스 원문: https://github.com/google/fonts/blob/main/ofl/sourceserif4/OFL.txt
- 공식 배포처: https://fonts.google.com/specimen/Source+Serif+4

## 넣는 방법 (위에서부터 되는 것 하나)
1. Next.js(App Router)면 `next/font/google` 의 `Source_Serif_4` 를 쓴다. 가변 폰트라 weight 는 생략, subsets: ["latin"], display: "swap", variable: "--font-source-serif-4". 루트 layout 의 <html> className 에 변수를 붙인다.
2. Vite·CRA·Astro 등은 `npm i @fontsource-variable/source-serif-4` 후 엔트리(main.tsx 등)에서 `import "@fontsource-variable/source-serif-4";`.
3. 빌드 도구가 없는 HTML 이면 <head> 에:
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap">

## 지켜 줄 것
- font-family 는 CSS 변수(--font-source-serif-4)로 한 곳에서만 정의하고, 대체 글꼴을 붙인다: `"Source Serif 4", serif`.
- 어디에 쓸지 내가 말하지 않았으면 제목(h1~h3)과 큰 숫자에만 적용한다.
- 폰트 파일을 프로젝트에 넣었다면 라이선스 원문(OFL.txt)을 폰트 파일과 같은 폴더에 같이 둔다. CDN·npm 이면 따로 둘 필요 없다.
- 끝나면 바뀐 파일 목록과, 실제로 그 폰트로 그려지는지 확인한 방법(개발 서버 화면·computed font-family 등)을 알려 줘.

출처: Duchamp 폰트 둘러보기 https://duchamp.app/fonts/source-serif-4

디자인 툴 · Figma 는 Google Fonts 수록 폰트를 설치 없이 쓸 수 있습니다(글꼴 검색에 영문 이름). 다른 앱은 공식 페이지에서 파일을 받아 더블클릭 → 설치 후 앱을 다시 엽니다.

굵기 8단계 · 가변

200
The quick brown fox jumps
300
The quick brown fox jumps
400
The quick brown fox jumps
500
The quick brown fox jumps
600
The quick brown fox jumps
700
The quick brown fox jumps
800
The quick brown fox jumps
900
The quick brown fox jumps

글자 견본

한글이 없는 라틴 폰트입니다. 한글은 다른 폰트와 섞어 씁니다.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !?&%₩@#()

라이선스

상업 사용 가능
웹·앱 임베드 가능
수정·재배포 가능(수정본은 이름을 바꾸고 라이선스 동봉)
폰트 파일 단독 판매만 금지

라이선스 원문 ↗공식 배포처 ↗소스 저장소 ↗

제작 Frank Grießhammer

바로 넣기

굵기 8단계 · 가변

글자 견본

라이선스

다른 시리즈