---
url: "/ko/emailify/design/fonts.md"
description: "사용자 지정 웹 폰트는 iOS/MacOS Apple Mail에서만 지원돼요. 이를 위한 폰트 임베드를 추가하고, 다른 모든 이메일 클라이언트에 표시할 웹 안전 대체 폰트를 설정하세요."
---

# 이메일에 웹 폰트와 웹 안전 대체 폰트 사용하기

> 사용자 지정 웹 폰트는 iOS/MacOS Apple Mail에서만 지원돼요. 이를 위한 폰트 임베드를 추가하고, 다른 모든 이메일 클라이언트에 표시할 웹 안전 대체 폰트를 설정하세요.

> **Warning:** 현재 [이메일 클라이언트의 사용자 지정 폰트 지원](https://www.caniemail.com/features/css-at-font-face/)은 **iOS/MacOS의 Apple Mail**로 한정돼요. 이 점을 알아 두고 사용자 지정 폰트의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요.

### 영상 튜토리얼: Figma에서 내보낸 HTML 이메일에 사용자 지정 웹 폰트 임베드하기(영어)

이 영상은 Figma Emailify 플러그인으로 Figma에서 내보낸 HTML 이메일에 사용자 지정 웹 폰트(웹 안전 대체 폰트 포함)를 임베드하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/dtTNDXeO3FA)

## 사용자 지정 웹 폰트 URL 임베드 추가하기 {#adding-custom-web-font-url-embeds}

[Video](/assets/videos/emailify/design/applying-web-fonts.mp4)

사용자 지정 폰트를 쓴다면 `.woff` 또는 `.woff2` 폰트 파일 URL을 직접 링크해야 해요. 플러그인의 **Preview** 패널에서 **Configure Fonts** 버튼을 클릭하면 추가할 수 있어요.

여기에 이메일 디자인에 쓴 각 사용자 지정 폰트의 링크(예: `https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff`)를 붙여 넣으면, 내보낸 HTML에 `@font-face` CSS 규칙으로 포함돼요.

> **Note:** 반드시 `.woff` 또는 `.woff2` 웹 폰트 파일을 직접 링크하세요. CSS 임베드 링크만 있다면 브라우저에서 그 링크를 열어 보세요. 그 안에 폰트 파일로 연결되는 `url` 링크(예: `https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff`)가 있을 텐데, 이를 복사해 플러그인에 붙여 넣으면 돼요.

> **Warning:** **사용자 지정 폰트 임베드는 iOS/MacOS Apple Mail에서만 지원돼요**. 현재 [이메일 클라이언트의 사용자 지정 폰트 지원](https://www.caniemail.com/features/css-at-font-face/)은 *iOS/MacOS의 Apple Mail*로 한정돼요. 이 점을 알아 두고 사용자 지정 폰트의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요.

## 웹 안전 대체 폰트 설정 및 미리보기 {#setting-and-previewing-web-safe-fallback-fonts}

[Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4)

이메일에 사용자 지정 폰트를 쓴다면 각 사용자 지정 폰트에 [웹 안전 대체 폰트](#list-of-web-safe-fallback-fonts)를 설정할 수 있어요. 이 폰트는 [사용자 지정 폰트를 지원하지 않는 이메일 클라이언트](https://www.caniemail.com/features/css-at-font-face/)에서 HTML 이메일을 볼 때 대신 표시돼요.

Google 폰트와 사용자 지정 폰트의 대체 폰트도 같은 **Configure Fonts** 설정 패널에서 지정할 수 있어요.

이메일의 사용자 지정 웹 폰트에 [웹 안전 대체 폰트](#list-of-web-safe-fallback-fonts)를 지정했다면, Emailify 미리보기 창 하단의 **Show Fallback Fonts** 스위치를 켜서 어떻게 보일지 미리 확인할 수 있어요.

### 웹 안전 대체 폰트 목록 {#list-of-web-safe-fallback-fonts}

아래는 Figma 이메일 디자인에 쓴 사용자 지정 웹 폰트에 설정할 수 있는 웹 안전 폰트예요. 사용자 지정 폰트 임베드는 iOS/MacOS Apple Mail에서*만* 지원되기 때문에, 아래에서 지정한 대체 폰트가 아쉽게도 사용자 지정 폰트를 지원하지 않는 다른 모든 이메일 클라이언트(예: Outlook, Gmail 등)에 표시될 폰트를 결정해요.

 #### Sans-Serif 웹 안전 대체 폰트

  - Arial
  - Arial Black
  - Tahoma
  - Trebuchet MS
  - Verdana

  #### Serif 웹 안전 대체 폰트

  - Georgia
  - Times New Roman

  #### Monospace 웹 안전 대체 폰트

  - Courier New

## 이메일에 Google 폰트 사용하기 {#using-google-fonts-in-your-emails}

Figma에 기본으로 포함된 [Google Fonts 라이브러리](https://fonts.google.com/)의 폰트를 쓰는 Figma 레이어가 있으면, Emailify는 HTML 내보내기에 Google 폰트 `@import` 코드를 자동으로 포함해요.

Google 폰트는 [이메일에서 @font-face 사용을 지원하는 이메일 클라이언트](https://www.caniemail.com/features/css-at-font-face/)에서만 보여요. 사용자 지정 폰트를 지원하지 않는 이메일 클라이언트에서는 대신 [웹 안전 대체 폰트](#list-of-web-safe-fallback-fonts)(예: “Arial”, “Georgia”, “Courier”)가 자동으로 적용돼요.

> **Warning:** **Google 폰트는 iOS/MacOS Apple Mail에서만 지원돼요**. 현재 [이메일 클라이언트의 사용자 지정 폰트 지원](https://www.caniemail.com/features/css-at-font-face/)은 *iOS/MacOS의 Apple Mail*로 한정돼요. 이 점을 알아 두고 사용자 지정 폰트의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요.

> **Tip:** **이미지에 사용자 지정 폰트 사용하기**. 사용자 지정 폰트가 모든 이메일 클라이언트에서 똑같이 보이도록 해야 한다면, 텍스트 레이어를 “Image” 프레임 안에 넣는 것을 고려해 보세요. 이 텍스트 콘텐츠는 이미지의 일부로 내보내지기 때문에 사용자 지정 웹 폰트 지원 여부와 상관없이 제대로 표시돼요.