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

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

현재 이메일 클라이언트의 사용자 지정 폰트 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 이 점을 알아 두고 사용자 지정 폰트의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요.

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

이 영상은 Figma Emailify 플러그인으로 Figma에서 내보낸 HTML 이메일에 사용자 지정 웹 폰트(웹 안전 대체 폰트 포함)를 임베드하는 방법을 보여 줘요.

사용자 지정 웹 폰트 URL 임베드 추가하기 ​

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

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

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

사용자 지정 폰트 임베드는 iOS/MacOS Apple Mail에서만 지원돼요. 현재 이메일 클라이언트의 사용자 지정 폰트 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 이 점을 알아 두고 사용자 지정 폰트의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요.

웹 안전 대체 폰트 설정 및 미리보기 ​

이메일에 사용자 지정 폰트를 쓴다면 각 사용자 지정 폰트에 웹 안전 대체 폰트를 설정할 수 있어요. 이 폰트는 사용자 지정 폰트를 지원하지 않는 이메일 클라이언트에서 HTML 이메일을 볼 때 대신 표시돼요.

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

이메일의 사용자 지정 웹 폰트에 웹 안전 대체 폰트를 지정했다면, Emailify 미리보기 창 하단의 Show 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 폰트 사용하기 ​

Figma에 기본으로 포함된 Google Fonts 라이브러리의 폰트를 쓰는 Figma 레이어가 있으면, Emailify는 HTML 내보내기에 Google 폰트 @import 코드를 자동으로 포함해요.

Google 폰트는 이메일에서 @font-face 사용을 지원하는 이메일 클라이언트에서만 보여요. 사용자 지정 폰트를 지원하지 않는 이메일 클라이언트에서는 대신 웹 안전 대체 폰트(예: “Arial”, “Georgia”, “Courier”)가 자동으로 적용돼요.

Google 폰트는 iOS/MacOS Apple Mail에서만 지원돼요. 현재 이메일 클라이언트의 사용자 지정 폰트 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 이 점을 알아 두고 사용자 지정 폰트의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요.

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