CSS - 3

- CSS font

h1 ~ h6는 타이틀로 사용하는데 크기가 정해져 있고 p도 디폴트 값이 있지만

font 명령어로 재지정해서 리디자인을 할 수 있다

그럼 지정 명령어가 없다면 css가 없는 건가?

아니다 브라우저 스타일 시트가 디폴트 값으로 들어간 것

HTML에서 직접 지정할 시에는 개발자 시트라고 할 수 있음

- CSS style

매우 중요

단위: px, em, rem

이 중 제일 중요한 것 rem

폰트에 weight 값을 지정할 수 있다

하지만 weight 값이 이미 지정된 애들도 있음

이럴 땐 Bold 값 사용

- Web font

* Web font 생태계

폰트는 회사의 유로나 무료 폰트를 많이 사용했을 것인데, 웹 폰트도 동일함

최근의 추세는 모든 웹에서 유료 폰트 사용 X, 무료 폰트의 이용이 큼

* 무료 폰트 어디서 구할까?

1. 구글 웹 폰트 - 가장 알려진 방법

2. 사회 공헌 차원의 폰트 배포 - 네이버나 현대 등 대기업에서 배포함 (네이버의 하늘나무체, 배민체, 현대카드체 등)
3. 강중소 기업에서의 폰트 브랜딩 - 사회 공헌에서의 배로 or 유료 판매

웹 폰트가 필요한 이유

과거에는 사용자의 PC에 설치된 폰트(기본 서체: 굴림, 돋움, Arial 등)만 웹사이트에서 보여줄 수 있었습니다

일관성 결여: 내 컴퓨터에서는 예쁜 '나눔고딕'으로 보이지만, 그 폰트가 없는 친구 컴퓨터에서는 투박한 '기본 서체'로 깨져 보이는 문제가 있었습니다
디자인의 제약: 특별한 서체를 쓰려면 글자를 아예 '이미지'로 만들어서 넣어야 했는데, 이는 수정이 어렵고 검색 엔진이 글자를 읽지 못한다는 단점이 있었습니다

웹 폰트를 사용하면 이런 문제 없이 어떤 환경에서든 똑같은 디자인을 유지할 수 있습니다

웹 폰트 사용 방법 (두 가지 핵심 방식)

1. 외부 서비스 이용 (Google Fonts 등)

가장 쉽고 많이 쓰이는 방법입니다. 구글 폰트 같은 서비스에서 제공하는 코드 한 줄만 복사해서 붙여넣으면 됩니다
(웹 폰트 배포 사이트에서 CDN(기업의 배포)으로 서비스 하는 방법)

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

2. 서버에 직접 업로드 (@font-face)

폰트 파일을 직접 내 서버에 올리고 CSS로 연결하는 방식입니다
(로컬 서버에 같이 사용할 폰트 파일도 함께 업로드 하는 방법)

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2');
}

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

웹 폰트 파일 형식 리스트

브라우저마다 지원하는 폰트 형식이 다르기 때문에 용도에 맞게 선택해야 합니다.

WOFF2 / WOFF: 웹을 위해 태어난 형식입니다. 압축률이 매우 좋아 현재 가장 권장되는 표준 포맷입니다.
OTF / TTF: 일반적인 설치용 폰트입니다. 용량이 커서 웹에서 그대로 쓰기엔 부담스러울 수 있습니다.
EOT: 과거의 인터넷 익스플로러(IE)를 위한 형식이지만, 현재는 거의 사용하지 않습니다.

실무자의 시선: 성능 최적화 팁

웹 폰트는 편리하지만, 너무 많이 사용하면 사이트 로딩 속도가 느려집니다.

폰트 다이어트 (Subset): 한글 폰트는 글자 수가 많아 용량이 매우 큽니다. 자주 쓰는 글자(가, 나, 다 등)만 추린 '서브셋 폰트'를 사용해 용량을 줄이는 것이 실무의 핵심입니다.
font-display 속성: 폰트가 다운로드되는 동안 글자가 안 보이는 현상을 방지하기 위해 font-display: swap; 옵션을 사용하여, 로딩 전까지는 기본 서체로 먼저 내용을 보여주는 것이 좋습니다.
우선순위 설정 (Fallback): font-family: '주서체', '보조서체', sans-serif; 순서로 작성하여, 첫 번째 폰트가 실패하더라도 차선책을 준비해 두어야 합니다.

* Web Font 실습 때

주의점: 공백 및 한글 사용 자제.( )에 쓸 때 에러가 남

돌발 상황의 예외 처리: 안전장치 cursive;
여기서 cursive는 시스템 폰트, 시스템 폰트는 공장 초기화 상태의 OS에 저장되어 있는 것

추가적으로 설치한 폰트는 시스템 폰트가 아님.

마지막 2차 안정 장치까지 사용하는 것이 좋음

이 때는 선택지가 두 가지: 세리프체 and 산세리프체

세리프체(명조): 가독성에 좋은 폰트
산세리프체(고딕): 세련되고 깔끔한 폰트

- 구글 웹폰트 사용 방법

https://lshjju.tistory.com/677

구글 웹폰트 사용 방법

구글웹폰트 사용 방법구글웹폰트 서비스 유아이는 놀라울 정도로 자주 변경 됩니다.시간이 조금만 지나도 아래 매뉴얼과 유아이가 달라질 수 있습니다.그래도 얼추 맥락은 비슷하니까 센스있

lshjju.tistory.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 아이콘을 눌러 클릭 한 번으로 활성화할 수도 있습니다

구글 웹폰트에서 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으로 사용하기

1단계: HTML <head>에 링크 추가하기

HTML 파일의 <head>와 </head> 태그 사이에 아래 코드를 복사해서 붙여넣으세요.

이 코드가 구글 서버에서 폰트 파일을 불러오는 역할을 합니다.

2단계: CSS로 폰트 적용하기

폰트를 불러왔다면, 이제 어떤 요소에 이 폰트를 사용할지 CSS에서 지정해야 합니다.

모든 글자에 적용하고 싶다면 body 태그에 설정하세요.

<!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>

- 2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지

2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지

UI 디자인을 시작할 때 어떤 폰트를 써야 할지 모르겠다면 가장 인기있는 폰트부터 시작해보는 것을 추천 합니다. 🇰🇷 한글 폰트 추천 (Top 5)한글 UI 디자인의 핵심은 **'가독성'**과 **'다양한 두

lshjju.tistory.com

🇰🇷 한글 폰트 추천 (Top 5)

한글 UI 디자인의 핵심은 '가독성'과 '다양한 두께(Weight)'입니다.

폰트명	특징 및 추천 용도
Noto Sans KR	부동의 1위. 구글과 어도비가 만든 표준 폰트입니다. 가장 안전하고 무난하며 모든 UI의 본문에 적합합니다.
Pretendard	실무 선호도 1위. 시스템 폰트(Apple, Windows)와 자간이 잘 맞아떨어져 UI 디자이너들이 가장 사랑하는 폰트입니다.
IBM Plex Sans KR	세련된 공학적 느낌. 기술적인 서비스나 대시보드 UI에 사용하면 현대적이고 정갈한 느낌을 줍니다.
Nanum Square	제목용 특화. 네이버에서 제작한 폰트로, 직선적인 형태가 강해 제목이나 강조하고 싶은 문구에 효과적입니다.
Gmarket Sans	브랜딩 강조. 가독성보다는 디자인적 개성이 강합니다. 랜딩 페이지의 큰 헤드라인이나 배너 디자인에 강력 추천합니다.

🇺🇸 영문 폰트 추천 (Top 5)

영문 UI는 '기하학적 구조'와 '화면 해상도 대응력'이 중요합니다.

폰트명	특징 및 추천 용도
Inter	UI의 정석. Figma의 기본 폰트이기도 하며, 모바일 화면의 작은 글자에서도 압도적인 가독성을 보여줍니다.
Roboto	안정감. 안드로이드 시스템 폰트로 유명하며, 기계적인 골격 속에 부드러운 곡선이 있어 신뢰감을 주는 앱에 좋습니다.
Poppins	기하학적(Geometric). 동글동글하고 세련된 느낌을 줍니다. 최근 테크 스타트업이나 트렌디한 웹사이트의 국룰 폰트입니다.
Montserrat	클래식한 모던함. 대문자로 썼을 때 굉장히 예쁘며, 버튼이나 네비게이션 메뉴 등 UI 요소의 포인트로 제격입니다.
Plus Jakarta Sans	라이징 스타. 현대적이고 깨끗한 산세리프 폰트로, SaaS나 대시보드 디자인에서 최근 굉장히 많이 보이고 있습니다.

UI 디자이너를 위한 꿀팁

Variable Font 활용: 구글 폰트에서 제공하는 Variable 버전을 사용하면, 파일 하나로 굵기를 세밀하게 조절할 수 있어 성능(용량)과 디자인 자유도를 동시에 잡을 수 있습니다.
숫자 폰트 확인: UI에서는 가격이나 수치가 중요하므로, 폰트를 고를 때 숫자(0~9)의 모양이 직관적이고 예쁜지 꼭 확인하세요. (Ex: Inter나 IBM Plex Sans는 숫자가 매우 명확합니다.)

'CSS' 카테고리의 다른 글

CSS - 5 _ 2 (0)	2026.03.18
CSS - 5 (0)	2026.03.18
CSS - 4 (0)	2026.03.17
CSS - 2 (0)	2026.03.13
CSS - 1 (3)	2026.03.12

땅굴

CSS - 3

- CSS font

- CSS style

- Web font

* Web font 생태계

웹 폰트가 필요한 이유

웹 폰트 사용 방법 (두 가지 핵심 방식)

1. 외부 서비스 이용 (Google Fonts 등)

2. 서버에 직접 업로드 (@font-face)

웹 폰트 파일 형식 리스트

실무자의 시선: 성능 최적화 팁

* Web Font 실습 때

- 구글 웹폰트 사용 방법

구글 웹폰트 다운로드 받아서 내 컴에 설치하기

1단계: 구글 폰트에서 파일 다운로드하기

2단계: 컴퓨터에 폰트 설치하기 (Windows/Mac)

3단계: 포토샵에서 확인하기

설치할 때 주의할 점

구글 웹폰트에서 CDN 코드 가져오기

구글 폰트에서 CDN 코드 가져오기 (5단계)

1. 폰트 검색 및 선택

2. 필요한 두께(Styles) 선택

3. 장바구니(Selected families) 열기

4. 태그 방식 선택 (@import vs <link>)

5. 코드 복사하기

코드 적용 예시

① HTML에 붙여넣을 부분 (Head 영역)

② CSS에 붙여넣을 부분 (Style 영역)

주의사항: 'Variable' 폰트란?

구글웹폰트 내 프로젝트에 CDN으로 사용하기

- 2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지

🇰🇷 한글 폰트 추천 (Top 5)

🇺🇸 영문 폰트 추천 (Top 5)

UI 디자이너를 위한 꿀팁

'CSS' 카테고리의 다른 글

티스토리툴바

CSS - 3

- CSS font

- CSS style

- Web font

* Web font 생태계

웹 폰트가 필요한 이유

웹 폰트 사용 방법 (두 가지 핵심 방식)

1. 외부 서비스 이용 (Google Fonts 등)

2. 서버에 직접 업로드 (@font-face)

웹 폰트 파일 형식 리스트

실무자의 시선: 성능 최적화 팁

* Web Font 실습 때

- 구글 웹폰트 사용 방법

구글 웹폰트 다운로드 받아서 내 컴에 설치하기

1단계: 구글 폰트에서 파일 다운로드하기

2단계: 컴퓨터에 폰트 설치하기 (Windows/Mac)

3단계: 포토샵에서 확인하기

설치할 때 주의할 점

구글 웹폰트에서 CDN 코드 가져오기

구글 폰트에서 CDN 코드 가져오기 (5단계)

1. 폰트 검색 및 선택

2. 필요한 두께(Styles) 선택

3. 장바구니(Selected families) 열기

4. 태그 방식 선택 (@import vs <link>)

5. 코드 복사하기

코드 적용 예시

① HTML에 붙여넣을 부분 (Head 영역)

② CSS에 붙여넣을 부분 (Style 영역)

주의사항: 'Variable' 폰트란?

구글웹폰트 내 프로젝트에 CDN으로 사용하기

- 2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지

🇰🇷 한글 폰트 추천 (Top 5)

🇺🇸 영문 폰트 추천 (Top 5)

UI 디자이너를 위한 꿀팁

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바