목차

CSS Fonts

  • description : CSS Font, Font-family, web safe, style, size, Google, Pairings, Shorthand
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-08



Source of the article



CSS Google Fonts

HTML 표준 폰트 이외의 것을 사용하려면, Google Fonts를 사용할 수 있습니다.

Google Fonts는 무료로 사용할 수 있고, 1000개 이상의 폰트를 선택하여 사용할 수 있습니다.

Google Fonts 사용법

<head> 섹션에 스타일 시트 링크를 추가하고, CSS에서 해당 폰트를 참조합니다.

예제

Google Fonts중에서 “sofia” 폰트를 사용하는 예제입니다.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>


예제

Google Fonts중에서 “Trirong” 폰트를 사용하는 예제입니다.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>


예제

Google Fonts중에서 “Audiowide” 폰트를 사용하는 예제입니다.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>


Note:
CSS에서 폰트를 지정할 때, 예상치 못한 동작을 방지하기 위해 항상 최소 하나의 예비 폰트를 목록에 삽입합니다. 그래서 마찬가지로 목록의 마지막에 serif나 sans-serif 같은 범용 글꼴 집합을 추가해야 합니다.


Use Muliple Google Fonts (여러 개의 구글 폰트를 사용하기)

여러 개의 구글 폰트를 사용하기 위해, a pipe character (|)를 사용하여 폰트 이름을 구분합니다.

예제

<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>


Note:
여러 개의 폰트를 요청하는 것은 웹 페이지를 느리게 할 수도 있으나, 신중히 사용합니다.


Styling Google fonts (구글 폰트 스타일링하기)

CSS를 사용하여 구글 폰트를 스타일링할 수 있습니다.

예제

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>



Enabling Font Effects (폰트 효과 사용하기)

구글은 사용할 수 있는 다양한 폰트 효과를 가지고 있습니다.

우선 effect=effectname를 구글 API에 추가하고, 특수 효과를 사용할 해당 요소에 특별한 클래스 이름을 추가합니다.
클래스 이름은 항상 font-effect-로 시작하고 effectname으로 끝납니다.

예제

“Sofia” 폰트에 fire 효과 추가하기

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>
 
<h1 clsss="font-effect-fire">Sofia on Fire</h1>
 
</body>


예제

여러 개의 폰트 효과를 요청하기 위해, a pipe character (|)를 사용하여 폰트 효과 이름을 구분합니다.

<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 clsss="font-effect-neon">Neon Effect</h1>
<h1 clsss="font-effect-outline">Outline Effect</h1>
<h1 clsss="font-effect-emboss">Emboss Effect</h1>
<h1 clsss="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
 
</body>
, , ,