• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 폰트와 로딩

웹 폰트를 로딩할 때 자주 사용되는 두 가지 개념인 FOIT (Flash of Invisible Text)와 FOUT (Flash of Unstyled Text)에 대해 설명할게요. 이 두 가지는 폰트가 로딩되는 동안 사용자가 보는 텍스트의 스타일과 관련이 있어요.

FOIT (Flash of Invisible Text)

FOIT는 "Flash of Invisible Text"의 약자로, 폰트가 로딩되기 전에 텍스트가 보이지 않는 현상을 말해요.

@font-face {
	font-family: 철수의폰트;
	src: url("./00-myfont01.woff2");

	/* foit (최초에 안보여주기 => 그럼에도 3초동안 못 받아오면, 기본폰트로 보여줌) */
	font-display: block;
}

• 무슨 뜻인가요? FOIT는 웹 폰트가 로딩되기 전까지 텍스트가 보이지 않거나 숨겨지는 현상을 의미해요. 사용자가 페이지를 처음 열었을 때, 웹 폰트가 로딩될 때까지 기본 폰트로 표시되지 않고 빈 공간이나 아무 텍스트도 보이지 않을 수 있어요.
• 왜 발생하나요? 이 현상은 웹 폰트가 완전히 로딩될 때까지 브라우저가 텍스트를 렌더링하지 않기 때문에 발생해요. 즉, 폰트가 로딩될 때까지 페이지에 텍스트가 아예 보이지 않을 수 있죠.

FOUT (Flash of Unstyled Text)

FOUT는 "Flash of Unstyled Text"의 약자로, 웹 폰트가 로딩되기 전에 스타일이 적용되지 않은 텍스트가 잠깐 보이는 현상을 말해요.

@font-face {
	font-family: 철수의폰트;
	src: url("./00-myfont01.woff2");

	/* fout (최초에 기본폰트로 보여주기) */
	font-display: swap;
}

• 무슨 뜻인가요? FOUT는 웹 폰트가 로딩되기 전까지 기본 폰트로 표시된 텍스트가 잠깐 보이다가 나중에 웹 폰트로 스타일이 바뀌는 현상을 의미해요. 사용자가 페이지를 열었을 때, 처음에는 기본 폰트로 텍스트가 보이고, 웹 폰트가 로딩되면 다시 스타일이 적용돼요.
• 왜 발생하나요? FOUT는 웹 폰트가 로딩되기 전까지 브라우저가 기본 폰트로 텍스트를 렌더링하기 때문에 발생해요. 즉, 웹 폰트가 로딩된 후에야 스타일이 변경되죠.

폰트 확장자

• TTF
  • TTF는 "TrueType Font"의 약자로, 1980년대 후반에 애플과 마이크로소프트가 공동으로 개발한 폰트 포맷입니다.
  • 특징:
    • 범용성: 거의 모든 운영 체제와 소프트웨어에서 지원돼요.
    • 크기: TTF 파일은 보통 다른 폰트 포맷보다 상대적으로 큰 편이에요.
  • 용도: TTF는 주로 데스크톱에서 사용되며, 웹에서 사용하기에는 불편할 수 있어요. 파일 크기가 크고, 웹에서 최적화된 포맷이 아니기 때문이죠.
• WOFF
  • WOFF는 "Web Open Font Format"의 약자로, 웹 폰트를 위해 설계된 파일 포맷입니다. WOFF는 TTF와 OTF(OpenType Font)를 기반으로 하여 웹에서 최적화된 폰트 포맷이에요.
  • 특징:
    • 웹 최적화: 웹에서 빠르게 로딩될 수 있도록 설계되었어요. 파일 크기가 작아서 페이지 로딩 속도가 빨라요.
    • 범용성: 주요 웹 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원돼요.
    • 압축: 폰트 파일이 압축되어 있어 더 작은 크기로 전송될 수 있어요.
  • 용도: 웹에서 폰트를 사용할 때 주로 사용됩니다. 웹 폰트 서비스(예: Google Fonts, Adobe Fonts)에서도 WOFF 포맷을 많이 사용해요.
• WOFF2
  • WOFF2는 WOFF의 개선된 버전으로, 더욱 효율적으로 폰트를 압축할 수 있어요. WOFF2는 더 작은 파일 크기를 제공하며, 현대 브라우저에서 널리 지원됩니다.
  • 특징:
    • 파일 크기: WOFF보다 더 작은 파일 크기를 제공하여 웹 페이지 로딩 속도를 더욱 개선할 수 있어요.
    • 호환성: 최신 브라우저에서 지원되며, 구형 브라우저는 WOFF 포맷을 사용해 폰트를 제공할 수 있어요.

📝 실습 코드