제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 디자이너 및 타일윈드 CSS/Next.js 사용자

난이도: 중급 (CSS 속성 사용 및 폰트 호스팅 기술 필요)

핵심 요약

• 폰트의 글리프(glyph) 변형은 동일한 글꼴로도 시각적 차이를 유발할 수 있음
• font-feature-settings: "ss07"; 같은 CSS 속성을 통해 글리프 스타일을 커스터마이징 가능
• Next.js + Google Fonts 사용 시 일부 OpenType 기능(예: cv02)이 제한될 수 있어 로컬 호스팅이 권장됨

섹션별 세부 요약

1. 문제 발견: 동일한 폰트의 시각적 차이

• Brittany Chiang의 포트폴리오와 자신의 사이트에서 Inter 폰트 사용 시 글꼴 외관 차이 발생
• font-weight 및 letter-spacing 조정으로 해결되지 않음
• 'a' 글리프의 형태 차이 (두 개의 글리프: double-storey, single-storey)로 인해 차이 발생

2. 글리프 변형과 OpenType 기능

• Double-storey 'a': 전통적, 인쇄에 적합
• Single-storey 'a': 현대적, 디지털 디자인에 적합
• Inter 같은 폰트는 OpenType 기능을 통해 여러 글리프를 지원

3. CSS로 글리프 스타일 변경 방법

• font-feature-settings 속성 사용 예: font-feature-settings: "ss07";
• Tailwind CSS + Next.js 환경에서는 globals.css에 설정 적용
• next/font/google 사용 시 일부 OpenType 기능이 누락될 수 있음

4. 로컬 호스팅을 통한 완전한 제어

• Inter 폰트를 GitHub에서 직접 다운로드 후 src/app/fonts에 배치
• next/font/local을 사용해 로컬 폰트 설정
• layout.tsx와 globals.css에서 글리프 설정 적용 후 성공적 적용

결론

• OpenType 기능과 로컬 폰트 호스팅을 통해 글리프 스타일을 정밀하게 컨트롤할 수 있음
• Google Fonts 사용 시 제한된 기능을 우회하기 위해 로컬 호스팅이 필수적임
• font-feature-settings를 통해 디자인 일관성을 유지하며 글꼴 외관을 최적화할 수 있음