개발나라 스용공주

[CSS] @font-face 적용하는 법 / 웹 폰트 사용하는 방법 - 웹페이지에 원하는 폰트 적용하기 본문

WEB/HTML & CSS

[CSS] @font-face 적용하는 법 / 웹 폰트 사용하는 방법 - 웹페이지에 원하는 폰트 적용하기

스용공주 2024. 10. 9. 15:11
728x90
728x90

이번 글은 @font-face를 적용하는 방법에 대한 글을 작성할 것이다.

 

 

 

 

[ 1. 웹폰트 가져오기 ]

우선 웹폰트는 아래 사진과 같이 '눈누' 사이트에서 원하는 폰트를 선택하고 사진과 같이 '웹폰트로 사용'에서 코드를 긁어서 사용해주면 된다.

https://noonnu.cc/

 

눈누

상업용 무료 한글 폰트 사이트

noonnu.cc

 

 

[ 2. 웹폰트 적용하기 ]

html에서 <style>태그 안, 즉 css 부분에 위에서 복사한 @font-face를 복사해서 붙여넣어준다.

<style>
@font-face {
            font-family: 'HakgyoansimDunggeunmisoTTF-B';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
</style>

 

 

그리고 <body>에서 해당 폰트를 적용할 부분에 font-family를 사용하여 그 폰트를 아래 코드와 같이 적용해준다.

=> font-family : 폰트명;

<style>
@font-face {
            font-family: 'HakgyoansimDunggeunmisoTTF-B';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
h1 {
	font-family : HakgyoansimDunggeunmisoTTF-B;
    }
</style>

<body>
<h1>안녕하세요.</h1>
</body>

 

 

 

 

[ 3. 실행 결과 ]

 

 

[ 4. 전체 코드 ]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        @font-face {
            font-family: 'HakgyoansimDunggeunmisoTTF-B';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
        h1 {
            font-family: HakgyoansimDunggeunmisoTTF-B;
        }
    </style>
</head>
<body>
    <h1>안녕하세요.</h1>
</body>
</html>

 

 

 

728x90
728x90

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

[HTML/CSS] 자식선택자와 자손선택자 차이점 이론 설명 / 부모요소와 자식요소  (0) 2024.10.22
[HTML] html 기본 구문 단축키 / <!DOCTYPE html> 한번에 불러오기  (0) 2024.10.20
[HTML] box-sizing 속성 / 요소의 크기를 계산하는 방법에 대한 기준  (0) 2024.07.30
[HTML] 화장품 공식 판매 사이트 만들기  (0) 2024.07.28
[HTML] 글씨에 줄 긋기 / <del>태그  (0) 2024.07.28
'WEB/HTML & CSS' Related Articles more
Comments