본문 바로가기
WEB/CSS

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

by SooooooooS 2023. 2. 7.
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

'WEB > CSS' 카테고리의 다른 글

[CSS] 다중 클래스 접근 및 Font-weight : Bold 설정  (0) 2024.05.16
[CSS] 글자 관련 CSS 정리  (0) 2023.02.16
[CSS] 여백(margin/padding) 기본 개념 정리  (0) 2023.02.12
[CSS] CSS 선택자(Selector) 정리  (0) 2023.02.12
[CSS] 배경(background) 관련 기본 CSS 사용해보기  (0) 2023.02.06

관련글

티스토리툴바