폰트 html에 추가하고 전체 적용하기 _구글폰트 이용하기

2022. 12. 6. 19:49ㆍHTML_CSS

google fonts의 홈페이지가 바뀌었네요. 맨 위에 fonts를 클릭합니다.

 

그리고 한국어가 지원되는 폰트를 찾아서 사용하고 싶은 것을 고릅니다.

 

처음에 코드가 나오는 것이 안나와서 당황했는데 첫 번째로 할 스타일을 고르고 두 번째로 맨 위에 네모 4개 아이콘을 클릭하면..

원하는 폰트의 link를 복사할 수 있었습니다. 그리고 해당 link의 아랫부분만 복사하면 된다고 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Hahmlet:wght@800&family=Jua&family=Nanum+Gothic&display=swap" rel="stylesheet">
  <style>
      
    .title{
      color: green;
    }
  </style>
</head>
<body>
  <h1 class="title">안녕하세요.</h1>

</body>
</html>

<title> 태그 밑에 link를 붙여 넣었습니다. 

 

그리고 css style에서 폰트 전체 적용도 할 수 있습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Hahmlet:wght@800&family=Jua&family=Nanum+Gothic&display=swap" rel="stylesheet">
  <style>
      *{
            font-family: 'Gowun Dodum', sans-serif;
        }

    .title{
      color: green;
    }
  </style>
</head>
<body>
  <h1 class="title">안녕하세요.</h1>

</body>
</html>

*{

}

를 이용하여 안에 font의 종류 코드를 삽입하면 끝 ~

 

 

'HTML_CSS' 카테고리의 다른 글

부트스트랩 v5를 이용하여 css 풍부하게 꾸미기  (0) 2022.12.07
css에서 width를 이용한 모바일 창 크기 화면 조정 방법  (0) 2022.12.07
다시 새롭게 시작하는 HTML_CSS  (0) 2022.12.06
완성된 연습용 홈페이지 _1 라푼젤에 관하여 (HTML, CSS)  (0) 2021.07.21
메뉴 옆에 내용 배치하기, overflow, position,gif, 유튜브 영상 삽입하기  (0) 2021.07.21

관련글

티스토리툴바