css @font-face나 @import 없이 link만 있는 경우 웹폰트 쓰는법 법? (웹폰트 사용법, 눈누, 구글폰트 사용법 포함)

(눈누, 구글폰트에서 웹폰트 소스 가져오는법은 내용 하단에 있음) 

➜  웹폰트를 삽입하는 법 @font-face, @import, <link>

1. @font-face와 @import

먼저 @font-face와 @import는 눈누나 구글폰트 등 웹폰트 검색 사이트에서 웹폰트 소스를 복사하여  css파일 상단에 붙여넣으면 바로 사용할 수 있다.

/* @import 예시 ------------------*/
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@100&display=swap');


/* @font-face 예시 ------------------*/
@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;
}

 
* 주의 사함
@import로 가져온 폰트는 @font-face 폰트보다 상단에 입력해야 작동된다.
@import는 가끔 font-family 속성값을 친절히 알려주지 않기도 하는데 보통 url 끝 쪽에 그 내용이 있으니 잘 찾아보시길ㅋㅋ

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@100&display=swap');

/* 이 웝폰트의 폰트패밀리 값 */
font-family: 'Saira';

 
* 참고 사항
@font-face는 font-family 속성의 값을 임의로 바꿀 수 있다.
폰트패밀리 속성을 쓸 때 값이 너무 길면 입력하기 번거로운데 내 마음대로 간결하게 줄여쓸 수 있어서 편리하다. 

/*폰트 'G마켓 산스'의 예시----------------------*/

@font-face {
    font-family: 'gms';   /* 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;
}

 
 
 

2. <link>

<link>로 웹폰트를 가져오는 방법은도 간단하다. 복사한 내용을 HTML의 head 부분에 붙여넣으면 된다.(css파일 아님!!)
그러나 매번 붙여넣기도 번거롭고 붙여넣어야 하는 내용도 상당이 길어서 나는 사용하지 않는다.
(안그래도 head에는 폰트 말고도 링크 걸 것이 많은데 정신없어짐...)

<!-- 폰트 링크 예시 --------------->

<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=Poppins:wght@300;400;500&display=swap" rel="stylesheet">

 

그런데 맘에 드는 폰트를 찾았는데 링크만 있으면 어떡하지???

그럴 땐, 폰트에 해당하는 링크의 href의 내용을 @import 안에 넣어서 @import 사용법과 똑같이 사용하면 된다!!!

/*위의 폰트 링크를 임포트하는 방법 예시 ---------------*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");

참 쉽쥬?
 
 
 
 

3. 마지막으로 눈누와 구글폰트에서의 웹폰트 소스를 가져오는 방법을 간단히 소개한다.

 

1. 눈누 https://noonnu.cc/index

폰트 상세페이지에서 화면 오른편에 있는 웹폰트로 사용의 내용 복사.

 
 
 

2. 구글폰트 https://fonts.google.com/

폰트 상세페이지를 스크롤해서 내려보면 폰트 스타일별로 추가 할 수 있는 버튼이 있다.
원하는 스타일을 클릭하여 추가하면 화면 오른쪽으로 Selected family라는 창이 나타난다. (나오지 않으면 장바구니 아이콘 클릭)
라디오버튼에서 @import 선택하여 첫번째 회색 박스에 있는 내용 복사.