WEB/CSS

[CSS] 구글 웹 폰트 사용해보기

SooooooooS 2023. 2. 7. 13:47
728x90

※ mac 사용, safari 사용

 

1. 구글 웹 폰트 링크 : https://fonts.google.com/?subset=korean&noto.script=Kore 

 

Google Fonts

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

fonts.google.com

 

2. 원하는 폰트 선택 후 Select Regular 400 클릭

3. (-) 아이콘 확인 후 우측 상단 아이콘 클릭

4. link 태그(빨간색 상자)는 <head> 부분에 복사, CSS(파란색 상자)는 <style>에 복사

5. 실습 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습해보기</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap" rel="stylesheet">
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url('../test/books.jpg');
            background-size: cover;
            /* 적용할 부분에 넣어주기 */
            font-family: 'Kirang Haerang', cursive;
        }
    </style>
</head>

<body>
    <div>
        <h1>안녕하세요!</h1>
    </div>
</body>

</html>

실행화면

728x90