구글 웹폰트 적용하는 방법, 무료폰트, CSS, HTML, 웹디자인

728x90

구글 웹폰트 적용하는 방법

구글 웹폰트를 활용하여 웹사이트나 블로그에 다양한 무료 폰트를 쉽게 적용할 수 있습니다. 아래의 단계에 따라 원하는 폰트를 추가해 보세요.

구글 웹폰트 사이트 접속

먼저, 구글 웹폰트 사이트에 접속합니다.

Browse Fonts - Google Fonts

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

fonts.google.com

이곳에서 원하는 스타일의 영문 또는 한글 폰트를 찾아볼 수 있습니다.

폰트 선택 및 코드 복사

사이트에서 마음에 드는 폰트를 선택한 후, 제공되는 코드 스니펫을 복사합니다. 이 코드는 HTML 문서에 추가할 폰트의 링크입니다.

HTML 문서에 폰트 추가

아래의 예제 코드를 참고하여 HTML 문서의 head섹션에 복사한 코드를 붙여넣습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts</title>
    
    <!---- 폰트 ---->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet" />
    <!---- 폰트 ---->
    
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <p class="regular">Montserrat Regular 400</p>
    <p class="medium">Montserrat Medium 500</p>
    <p class="bold">Montserrat Bold 700</p>
</body>
</html>

CSS에서 폰트 적용

폰트를 적용하기 위해 CSS 파일에 아래와 같이 스타일을 추가합니다.

p {
  font-family: "Montserrat", sans-serif;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

이 코드를 통해 각각의 문단에 원하는 폰트를 적용할 수 있습니다.

마무리

이렇게 간단한 단계를 통해 구글 웹폰트를 웹사이트에 적용할 수 있습니다. 다양한 폰트를 활용하여 웹디자인을 더욱 풍부하게 만들어 보세요. 추가적인 질문이나 도움이 필요하시면 언제든지 댓글로 남겨 주시면 최대한 지원하겠습니다.

728x90

구글 웹폰트 적용하는 방법, 무료폰트, CSS, HTML, 웹디자인