UIUX/Figma

[피그마] 웹에서 로컬 폰트 사용하기

imcodie 2024. 10. 22. 17:52

 

피그마 웹에서 기본으로 제공되는 폰트는 Google fonts인데요. 기본 글꼴 외에 다른 글꼴을 사용하고 싶은 경우에는 별도의 설정이 필요합니다.

 

로컬 폰트를 사용하는 두 가지 방법

피그마에서 로컬 폰트를 사용하기 위해서는 두 가지 방법 중에 선택하시면 됩니다.

1. <피그마 데스크톱 앱> 설치하기
2. <글꼴 설치 프로그램> 설치하기

 

피그마 데스크톱 앱을 설치하면 Figma font helper가 포함되어 있기 때문에 2번을 건너뜁니다.

저는 데스크톱 앱을 사용하지 않기 때문에 <웹에서 로컬 폰트를 사용하는 방법>을 소개하겠습니다.

 

그 이전에 안내사항을 읽어주시고 설정에 참고하시길 바랍니다.

⚠️ 로컬 폰트 관련 안내사항
- 공유된 팀 사용자의 경우, 모든 팀원이 동일한 로컬 폰트를 컴퓨터에 설치해주셔야 합니다.
- 참고로, 피그마는 .TTF .OTF 폰트 파일만 지원합니다.
- 피그마는 ChromeOS, Linux 운영체제의 기기에서는 로컬 폰트를 지원하지 않습니다. 기본 폰트를 사용해주세요.
[Windows] 로컬 폰트를 컴퓨터에 설치하는 방법
1. 폰트를 다운로드합니다.
2. C:\\Windows\\Fonts 위치에 폰트 파일을 붙여넣기하면 설치가 완료됩니다.

 

[피그마 웹] 글꼴 설치 프로그램 다운 받기

 

Figma 다운로드 페이지에서 [글꼴 설치 프로그램]을 OS에 맞게 다운로드합니다.

Figma 글꼴 설치 프로그램 다운로드하기

 

InstallFigmaAgent.exe 파일을 열어 [Install] 버튼을 클릭하면 설치가 진행됩니다.

다운로드 창에서 Install 클릭하기

 

Figma 창을 다시 열면 이제 로컬 폰트를 사용할 수 있습니다.

Figma 웹에서 로컬 폰트가 적용된 모습

 

👏 여기까지 잘 따라오셨다면 문제 없이 설치되셨을 거예요.

 

Missing fonts 에러

만약 Missing fonts 에러가 발생한 경우 몇 가지 팁을 알려드리겠습니다.

- 폰트가 잘 설치되었는지 확인해주세요.
   로컬 폰트가 잘 설치되었다면 다른 프로그램(예: 파워포인트)에서도 잘 보여야 합니다.
- 팀원과 동일한 폰트 파일을 설치해보세요. 버전이 맞지 않다면 충돌할 수 있습니다.
 [Windows] 글꼴 버전 확인하기
   [시작]-[설정]-[개인 설정]-[글꼴]에서 해당 글꼴을 검색하세요. 메타데이터의 [버전]을 확인해보세요.

 

 

👋

[웹에서 로컬 폰트 사용하기]

도움이 되셨길 바래요!


🔗 레퍼런스
[Figma 공식문서] Add a font to Figma design