본문 바로가기
HTML/CSS문법

CSS google fonts

by flycoding 2023. 8. 8.
반응형

CSS google fonts

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

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

 

google fonts 사용하기

<head> 섹션에 특수 스타일 시트 링크를 추가한 다음 CSS의 글꼴을 참조하면 된다.

 

여기서 Google 글꼴의 "Sofia"라는 글꼴을 사용하려고 한다:

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

 

여기서 Google 글꼴의 "Triong"이라는 글꼴을 사용하려고 한다:

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

 

여기서 Google 글꼴의 "Audiowide"라는 글꼴을 사용하려고 합니다:

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

 

다중 구글 폰트 사용하기

여러 Google 글꼴을 사용하려면 다음과 같이 글꼴 이름을 파이프 문자(|)로 구분한다:

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

참고: 글꼴을 여러 개 요청하면 웹 페이지 속도가 느려질 수 있다! 그러니 그것에 주의하세요.

 

구글폰트 스타일링

물론 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>
</head>

 

구글 폰트 효과 활성화하기

Google에서는 사용할 수 있는 다양한 글꼴 효과도 사용할 수 있다.

먼저 Google API에 effect= effectname을 추가한 다음 특수 효과를 사용할 요소에 특수 클래스 이름을 추가한다. 클래스 이름은 항상 font-effect-로 시작하고 effect 이름으로 끝난다.

<!DOCTYPE html>
<html>
<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 class="font-effect-fire">h1 제목 : 구글 폰트 Sofia on Fire</h1>
<p class="font-effect-fire">h1 제목 : 구글 폰트 Sofia on Fire.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>

구글 폰트 sofia에 effect를 fire 설정하기 위해 Sofia&effect=fire로 설정하고 font-effect-fire를 class로 설정하면 아래 그림과 같이 sofia 폰트에 불이 난것 같은 효과가 표시된다.

CSS google font-effect-fire 활용예제

 

여러 글꼴 효과를 요청하려면 다음과 같이 파이프 문자(|)로 효과 이름을 구분한다:

<!DOCTYPE html>
<html>
<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>
</html>

google fonts에 다양한 효과를 적용한 예시로, neon, outline, emboss, multiple shadow 효과를 적용하였고 결과는 아래 그림과 같다.

CSS google fonts 다양한 효과 활용 예시

 

지금가지 CSS에서 google fonts 사용하는 방법과 google fonts에 다양한 효과(neon, emboss, outline, fire 등)를 코드하고 실습해보았다.

모두 꼭 실습하기를 추천합니다.

화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS Icons  (0) 2023.08.10
CSS 어울리는 글꼴 조합  (0) 2023.08.09
CSS font-size 속성  (0) 2023.08.07
CSS font-style 속성  (0) 2023.08.06
CSS 예비 폰트  (0) 2023.08.05

관련글

댓글

티스토리툴바