웹 폰트 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_webfont</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=Jua&family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap" rel="stylesheet">

    <style>
        h1 {
            /* background-color: #cccccc; */
            border: 1px solid black;
            width: 500px;
            margin: 30px;
        }

        .b_sd {
            box-shadow: 10px 10px 10px gray;
        }

        h1:hover {
            background-color: yellow;
            color: blue;
        }

        .ff-nanum-pen {
            font-family: "Nanum Pen Script", cursive;
            font-weight: 400;
            font-style: italic;
        }
        
        .ff-jua {
            font-family: "Jua", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        .ff-nanum-gothic {
            font-family: "Nanum Gothic", sans-serif;
            font-weight: 400;
            font-style: normal;
        }
    </style>

</head>
<body>
    <h1 class="ff-jua b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
    <h1 class="ff-nanum-gothic b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
    <h1 class="ff-nanum-pen b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
</body>
</html>
HTML
복사