AngelPlayer`s Diary

 

 

 

HTML 문서를 다루게 될때 하나의 웹페이지를 만들고자하는 목적이 대부분이라고 생각합니다.

웹페이지를 만드는 동안에 사용하는 대부분은 글자 인데요.

 

오늘은 글자를 꾸밀때 많이 사용되는 구글 웹폰트에 대해 알아보도록 하겠습니다.

 

https://fonts.google.com/

 

Google Fonts

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

fonts.google.com

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

 

구글 웹폰트에 접속을하고 나서 마음에드는 폰트를 찾아봅시다.

 

 

마음에 드는 폰트를 찾으셨다면 그 폰트를 클릭합니다.

저는 첫번째 폰트로 하겠습니다.

 

 

 

클릭하면 다음 화면으로 넘어갑니다.

 

 

원하시는 폰트를 선택하고 순서를 따라 1번을 누르고 2번을 누르시면 오른쪽 Selected family 라는 탭이 열립니다.

3번과 4번은 HTML에서 사용할 예정이므로 복사를 해둡니다.

 

 

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title> GoogleFonts </title>

        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
        <style>
            p{
                font-family: 'Roboto', sans-serif;
            }
        </style>
    </head>
    <body>
        <p>Almost before we knew it, we had left the ground.</p>
    </body>
</html>

복사한 코드를 HTML에 적용하면.

다음과 같은 결과 화면이 나옵니다. 

 

 

이것으로 내 홈페이지에 글씨체 받아오는 방법에 대해서 알아보았습니다.

간단하지만 이런 세부적인 부분을 수정하면서 점차 나아지는 자신의 홈페이지를 확인 하실 수 있습니다.

 

 

 


해당 문서는 에디터가 공부를 하면서 습득한 지식을 간략화하여 작성한 포스트입니다.

간단하게 사용방법을 알고 싶거나, HTML 다루면서 헷갈리는 분들을 위해 작성되었으며,

완벽하게 개념을 이해하고, 복잡한 형태의 프로그래밍까지 공부하고 싶으신 분들은

W3school 이나 코딩 도장 등 개념 위주로 설명이 되어있는 사이트를 참고하시면 더욱 도움이 될 것입니다.


공유하기

facebook twitter kakaoTalk kakaostory naver band