記錄

CSS) 구글 폰트 적용 본문

Web/CSS

CSS) 구글 폰트 적용

surhommejk 2018. 5. 7. 15:47



CSS 구글 폰트 적용하는 방법



1. https://fonts.google.com/ 로 간다


2. https://fonts.google.com/ 에서 원하는 폰트를 골라 + 버튼을 누른다

  (한 번에 하나 할 필요 없이 장바구니에 물건 담듯 원하는 폰트가 많다면 모두 눌러도 상관 없다)




3. 아래에 뜬 Family Selected 를 눌러 창을 크게 만들고

   자동 생성된 <link ~> 와 CSS 설정을 복사하여 코드로 가져간다







4. 아래와 같이 코드에 넣는다 (코드는 다수의 폰트를 클릭했을 경우를 가정해서 사용)

<!DOCTYPE html>
<html>
<head>
<title>테스트 페이지</title>

<!-- <head> 태그 내부에 아래와 같이 구글 폰트에서 가져온 font의 링크를 넣는다 -->
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon|Nanum+Brush+Script|Nanum+Pen+Script"
rel="stylesheet">

<!-- 구글 폰트 사이트에서 알려준 그대로 style을 넣는다 -->
<!-- 폰트명 뒤에 있는 cursive나 sans-serif는 없어도 동작하는 것으로 확인했다 -->
<style type="text/css">
h1 {
font-family: 'Nanum Brush Script', cursive;
}

h2 {
font-family: 'Do Hyeon', sans-serif;
}

h3 {
font-family: 'Nanum Pen Script', cursive;
}

</style>
</head>

<body>
<h1>첫번째 h1</h1>
<h2>두번째 h2</h2>
<h3>세번째 h3</h3>

</body>
</html>





5. 결과


                



저작자표시

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

CSS) 폰트 크기, 글꼴, 줄간격, 정렬, 글꼴 꾸미기  (0) 2018.05.07
CSS) Selector, Selector 우선순위  (0) 2018.05.03
CSS) 색깔 설정, 배경 설정, border  (0) 2018.05.02
CSS) Basic, 외부 CSS 연결  (0) 2018.05.02
'Web/CSS' Related Articles more
Comments