Web/CSS

Google Fonts (구글 글꼴)

도어누들 2023. 1. 27. 10:35

HTML의 표준 글꼴을 사용하지 않으려면 Google 글꼴을 사용할 수 있다.

Google 글꼴은 무료로 사용할 수 있으며 1000개 이상의 글꼴 중에서 선택할 수 있다.

 

Google 글꼴을 사용하는 방법

<head> 섹션에 특별한 스타일 시트 링크를 추가한 다음 CSS에서 글꼴을 참조한다.

 

예를 하나 들어보자!

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
//Google Fonts의 "Sofia"라는 글꼴을 사용
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

// Google Fonts의 "Trirong"이라는 글꼴을 사용
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">

// Google Fonts의 "Audiowide"라는 글꼴을 사용
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">

 

주의할 점

CSS에서 글꼴을 지정할 때 예기치 않은 동작을 방지하기 위해 항상 최소 하나의 대체 글꼴을 나열한다.

따라서 여기서도 목록 끝에 일반 글꼴 모음(예: serif 또는 sans-serif)을 추가해야 합니다.

 

사용 가능한 모든 Google 글꼴 목록을 보려면 How To - Google Fonts Tutorial 을 참고한다.

 

 

여러개의 구글 글꼴을 사용하려면 파이프 문자( | ) 로 구분을 한다.

그러나 여러 글꼴을 요청하면 웹 페이지 로드 속도가 느려질 수 있다.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

 

특수효과

특수 효과도 넣을 수 있다.

effect = effectname 를 API에 추가하거나, font-effect - effectname 을 태그 CLASS로 지정해준다.

여러개의 효과를 넣을때는 파이프 문자( | )를 넣어준다.

 

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>