개발 공부 기록하기

DAY 9. Google Font 본문

프밍/CSS

DAY 9. Google Font

태영(泰伶) 2022. 11. 2. 22:26

https://fonts.google.com/?subset=korean&preview.size=64&preview.layout=row 

 

Google Fonts

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

fonts.google.com

 

 

책에 나온 Nanum Pen Script로

web font를 바꿔봐야겠다.

 

 

위의 링크 Google Font로 들어가서

 

Language를 Korean으로 고르고

Nanum Pen Script 찾아서 클릭해 들어가서 스크롤을 조금만 내리면 아래 화면이 나온다.

 

Select Regular 400 클릭.

 

@import에서 소스 코드 확인하고 2개의 음영 박스 속 코드를 예제파일에 아래 코드블럭처럼 붙여넣기 해주었다.

 

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>구글 폰트 사용하기</title>
         <style>
            @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
            h1 {
               font-size: 60px;
               font-weight: bold;
               font-family: 'Nanum Pen Script', cursive;
            }
         </style>
      </head>
      <body>
         <h1>HTML+CSS+JavaScript</h1>
      </body>
   </html>

↓

저작자표시 비영리 변경금지 (새창열림)

'프밍 > CSS' 카테고리의 다른 글

DAY 10. 텍스트 관련 스타일(2): text-align, line-height, text-decoration  (0) 2022.11.03
DAY 9. 텍스트 관련 스타일(1): color  (0) 2022.11.03
DAY 8. Web Font  (0) 2022.11.01
DAY 8. 글꼴 관련 스타일(3): font-style, font-weight  (0) 2022.11.01
DAY 7. 글꼴 관련 스타일(2): font-size  (0) 2022.10.31
'프밍/CSS' Related Articles more
Comments