FINAL PROJECT

[html] 웹폰트 적용하기

asso 2022. 7. 26. 22:55

1. 다음 코드를 폰트 적용하고 싶은 html, jsp의 <head>부분에 추가

    <link rel="stylesheet" href="./resources/bootstrap-5/html/css/font.css" type="text/css">

 

2. 경로에 맞게 css 파일을 만들거나, 원래있는 css 파일에 폰트정보를 추가해줌

/*별글씨체*/
@font-face {
    font-family: 'PyeongChangPeace-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/*G마켓폰트*/
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

- 무료폰트 사이트

1. 눈누 (noonnu.cc)

 

눈누

Gmarket Sans B - G마켓

noonnu.cc

2. Browse Fonts - Google Fonts

 

Google Fonts

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

fonts.google.com

 

1번 눈누의 경우 위처럼 해주고, 2번 구글폰트의 경우 css 파일에 @import를 넣어주면 된다.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@600&display=swap');

이런식으로!

 

전체에 적용하고 싶으면 

* {
	font-family: '폰트이름';
}

 

부분적으로 적용하고 싶으면

html, jsp 파일의 p든 h든 div 이든 style="font-family: '폰트이름';" 을 넣어주면 적용된다.

 

예시 >>

<p class="subtitle text-primary text-success" style="font-family: 'GmarketSansMedium';"><font size=-1>THE STARRY NIGHT</font></p>
<h2 style="font-family: 'PyeongChangPeace-Bold';">별보기 좋은 캠핑장 Best 5</h2>

(font-size=-1 을 해서 원래 크기에서 1사이즈 줄이는 것도 해주었다)

 

 

 

 

글씨체 적용해준 결과 >>

=> 오늘 만든 메인화면 컨텐츠들