[ Figma ] Figma에서 로컬폰트 사용하기 ( feat. Pretendard 폰트 )

피그마에서는 기본적으로 구글 웹폰트(Google Web Fonts)를 제공한다. 하지만 따로 다운로드하거나 유료로 구매해 로컬에 설치한 폰트를 쓰려면 약간의 세팅이 필요하다.

지금부터 피그마에서 로컬 폰트를 사용하는 방법을 알아보자!

폰트 다운로드

우선 사용할 폰트를 다운로드한다.

예시로는 많이 사용되는 Pretendard 폰트를 기준으로 설명하겠습니다.

Pretendard

Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는

cactus.tistory.com

다운받은 폴더의 압축을 해제한 뒤, public → static 폴더 안으로 이동한다.

이제 Mac에서 서체 관리자를 열고, 사용할 폰트를 드래그해서 옮겨준다. (복사/붙여넣기는 작동하지 않는다.)

정상적으로 설치가 완료되면 서체 관리자에서 해당 폰트를 확인할 수 있다.

다운받은 폴더의 압축을 해제한 뒤, public → static 폴더 안으로 이동한다.

설치할 폰트 파일들을 마우스로 드래그해 한 번에 선택한 뒤, 우클릭해서 ‘설치’를 눌러준다.

로컬 폰트를 사용하는 가장 간단한 방법은 피그마 데스크탑 앱을 사용하는 것이다.

Figma 데스크탑 앱에는 글꼴 설치 프로그램이 포함되어 있어서, 별도의 설정 없이도 로컬에 설치된 폰트가 자동으로 인식되어 바로 사용할 수 있다.

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱

macOS 또는 Windows용 데스크톱에 Figma 웹 디자인 앱을 설치하세요. 그리고 글꼴 설치 프로그램과 디바이스 미리보기 앱도 다운로드하세요.

www.figma.com

사용 중인 운영체제(macOS 또는 Windows)에 맞는 항목을 골라 데스크탑 앱을 설치해준다.

데스크탑 앱으로 프로젝트에 들어가면, 폰트 목록에 내가 설치한 로컬 폰트가 표시되는 것을 확인할 수 있다.

브라우저에서 로컬 폰트를 사용하려면 별도의 프로그램을 설치해야 한다.

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱

macOS 또는 Windows용 데스크톱에 Figma 웹 디자인 앱을 설치하세요. 그리고 글꼴 설치 프로그램과 디바이스 미리보기 앱도 다운로드하세요.

www.figma.com

운영체제(macOS 또는 Windows)에 맞는 설치 프로그램을 선택해 설치한 뒤, 브라우저에서 열려 있는 파일을 다시 로드(새로고침) 하면 로컬 폰트가 적용된다.

만약 적용이 되지 않을 경우, 잠시 기다렸다가 새로고침하시면 정상적으로 반영될 수 있습니다!