Google Fonts 임베드 치트 시트

Google Fonts는 HTML과 CSS에 빠르게 삽입할 수 있는 오픈소스 웹 타이포그래피 라이브러리를 제공합니다.

삽입 방법

HTML Link 태그

HTML 문서의 <head> 태그 안에 배치하세요:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

CSS @import

CSS 스타일시트의 최상단, 다른 규칙보다 먼저 포함하세요:

/* 굵기(weights)가 포함된 단일 폰트 패밀리 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* 여러 폰트 패밀리 결합하기 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,400;1,400&display=swap');

CSS Font Family 적용

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

참고 자료

• Google Fonts 라이브러리
• Google Fonts API 문서