HTML+CSS

HTML과 CSS에서 글꼴을 바꾸는 방법

Dodledd 2024. 3. 11. 14:12

글꼴 관련 스타일

글꼴을 바꿀 수도 있다.

우리가 원하는 것을 다운받아서 적용시키면 되는데 주의해야할 점은 저작권을 잘 봐야한다.

개인이 사용가능한지, 교육용인지, 상업적 이용이 가능한지.. 등등

잘 지켜서 불이익을 받지 않도록 허자

 

사용 방법은 head에 link 시켜주면 된다.

 

그럼 뭘 link 시켜주면 될까?

https://fonts.google.com/

 

Browse Fonts - Google Fonts

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

fonts.google.com

구글에서 무료로 풀어주는 폰트 들이다.

여기에 들어가서 원하는 글꼴을 선택 한 후

 

 

나는 이 선언의 어떠한 규정도 어떤 국가, 집단 또는 개인에게 이선언에 규정된 ..... 을 들어가보겠다.

 

오른쪽 위 1시방향에 Get font라고 적힌 것을 누르고

 

이어서 같은 1시방향 Get embed code를 누른다.

 

우리가 가져올 폰트의 <link>의 Copy code를 해서 링크를 복사해도 되고

@import를 해서 전체 적용 시키는 방법이 있다.

 

사용법

 

나는 Copy code로 링크를 복사해서 사용하겠다!!

헤드부분의 link를 보자

<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=Black+Han+Sans&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
    <style>
        #ff1{
            font-family: 궁서체;
            font-size: 24px;
        }
        #ff2{font-family: 고딕체;}
        #ff3{font-family: 'Courier New', Courier, monospace;}

        #ff4{
            font-family: "Black Han Sans", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

    </style>
</head>

가져온 링크를 붙여넣기만 해줘도 저렇게 link가 생성되어 있다.

그리고 우린 아이디 ff1에는 궁서체 24px, ff2에는 고딕체 등 아이디선택자로 지정해주었다.

 

글꼴을 확인해보자

    <h1>글꼴 관련 스타일 속성</h1>
    
    <h3>font-family : 글꼴을 지정할 때 사용</h3>
    <pre>선택자{font-family:글꼴명;}</pre>

    <p id="ff1">글꼴 테스트1</p>
    <p id="ff2">글꼴 테스트2</p>
    <p id="ff3">글꼴 테스트3</p>

잘나온다.

 

그럼 글꼴 수정하는 법을 보자

font - size : 글꼴의 크기를 변경할 때 사용한다.
font - weight : 글꼴의 굵기를 표현할 때 사용한다.

 

    <ul>
        <li>원래굵기</li>
        <li id="fw1">굵은 글꼴로 변경</li>
        <li id="fw2">원래 굵기보다 더 굵게</li>
        <li id="fw3">원래 굵기보다 더 가늘게</li>
    </ul>