Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

ruriruriya

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능) 본문

🖌️Web/CSS

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능)

루리야ㅑ 2020. 8. 13. 17:55

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능)

웹폰트란?

웹페이지를 보는 사람의 컴퓨터에 글꼴이 설치되어 있지 않아도 임시 글꼴을 받아 웹페이지에서도 볼 수 있게 하는 폰트이다.

1. 구글 폰트에 접속한다.

fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

2. 언어를 한국어로 바꾼다. 생각보다 한국어는 많지 않다.

3. 마음에 드는 폰트를 선택한 다음 사용할 폰트 굵기 별로 선택한다.

선택하면 우측 Selected family에 추가되는 것이 보인다.

HTML에 적용하는 방법(인라인 방법)

4. 추가한 후 Embed 를 클릭하면 첫번째로 html 의 head 영역에 link를 붙일 수 있는 태그와 속성이 나온다.

첫번째 네모에 있는 link 태그를 복사해서 head 영역에 붙여넣기 한다.

5. 그다음 css에 전체 영역에 두번째 네모안에 있던 font-family: 'Noto Serif KR', serif; 속성을 넣는다.

폰트 굵기를 사용하려면 해당 태그에 font-weight를 아까 선택했던 폰트 굵기 중 선택해서 값을 넣으면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>NEW</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
	*{font-family: 'Noto Serif KR', serif;}
	h2{font-weight : 900;}
	p{font-weight : 200;}
</style>
</head>

<body>
<h2>안녕하세요.</h2>
<p>반갑습니다!! 나비야 나비야 이리 날아오너라</p>


</body>
</html>

웹폰트 적용 전!

웹폰트 적용 후!

CSS에 적용하는 방법!

6. 아까 봤던 Embed에서 @import 클릭하면 스타일 시트에 적용할 수 있는 import가 나온다.

파란색 네모칸 내용을 복사해서 CSS 맨위에 붙여넣기 한 후 200;300; 이런식으로 된 ;(세미콜론)을 ,(콤마)로 바꿔준다.

그리고 아까 인라인 방법과 똑같이 전체에 font-family 속성 값을 넣고 저장하면 아까와 같이 폰트가 적용된다.

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200,300,400,500,600,700,900&display=swap');


*{
	font-family: 'Noto Serif KR', serif;
}

h2{
	font-weight : 900;
}

p{
	font-weight : 200;
}

'🖌️Web > CSS' 카테고리의 다른 글

HTML CSS 미디어쿼리(Media Query)란? (0)	2023.09.04

'🖌️Web/CSS' Related Articles

HTML CSS 미디어쿼리(Media Query)란? 2023.09.04

ruriruriya

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능) 본문

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능)

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능)

웹폰트란?

HTML에 적용하는 방법(인라인 방법)

CSS에 적용하는 방법!

'🖌️Web > CSS' 카테고리의 다른 글

티스토리툴바