질문사항
말에 라이브 진행했던 내용 중 폰트 관련 내용을 추가로 정리해서 공유드리려고 합니다!
답변
아래 상세 내용을 확인해주세요 :)
늘 헷갈리는 폰트 유형 (웹 환경을 기반으로)•
TTF : 윈도우와 맥 운영체제에서 사용되는 가장 일반적인 글꼴
•
OTF : 윈도우와 맥 운영체제에서 사용 가능하다. 여러 플랫폼 및 확장된 문자 집합에 대해 지원함 하지만 글꼴 압축이 불가해서 파일 크기가 큼
•
WOFF : 모든 브라우저에서 지원하는 메타 데이터와 압축 기능을 가지고 있으며 때문에 로드 속도가 빠르다는 장점
일반적으로 화면 로딩시 WOFF > TTF > OTF 순으로 로딩이 빠릅니다.
웹폰트와 로컬폰트: 로컬폰트는 내가 사용하는 기기에 저장되어 있는 폰트들입니다. 해당 폰트는 디자인할 때 가장 많이 사용하게 됩니다. 로컬폰트를 바로 개발에 적용하는 방식도 있지만 폰트 유무와 상관없이 무조건 폰트 다운로드를 요청하게 되기 때문에 불필요한 리소스를 요청할 수 있습니다.
: 웹폰트는 웹 서버에서 폰트를 불러와 사용하는 방식입니다. link태그로 불러오거나 css에 import해서 사용합니다. 대표적인 웹폰트 사이트로 구글폰트가 있습니다. 어느 기기나 환경에서든 인터넷만 연결되어 있다면 동일한 화면을 제공할 수 있는 장점으로 개발에서 가장 많이 사용하는 방식입니다. 하지만 화면 로딩마다 계속 폰트를 불러와야 하기 때문에 너무 많은 폰트스타일을 사용하면 로딩이 느려지고 무거워질 수 있어 유의해야 합니다. 피그마에서는 해당 웹폰트를 다운받아 로컬폰트 작업하고 개발자에게 웹폰트 소스 링크를 전달하면 좋습니다.
작업 방법위 내용에도 나와있지만 가장 추천하는 방식은 웹폰트로 배포되어있는 폰트를 사용해서(사용시 다운로드를 통해 로컬폰트화 시켜) 디자인을 진행하고 개발자에게 웹폰트 소스 링크를 전달해 적용해달라고 부탁하는 것이 좋습니다. 피그마에는 구글폰트가 기본적으로 많이 포함되어 있어 구글폰트 내에서 작업폰트를 찾는 것도 좋은 방법입니다.
추가로 알면 좋을 팁
하실 때 ~~단축키나 플러그인 쓰시면 더 편해요.
작업할 때 추가로 알게 되면 좋을 팁을 함께 남겨주세요. 없다면 생략 가능합니다.