Web Font

웹 폰트를 적용하는 방법

 

1. 무료 폰트 제공 사이트에서 폰트를 갖다 쓰는 방법

2. 내 컴퓨터에 있는 글꼴을 직접 적용하는 방법

 

 

 

 

1. 무료 폰트 제공 사이트에서 폰트를 갖다 쓰는 방법

 

구글 폰트에 접속해서 마음에 드는 글꼴을 클릭한다.

Regular 400에 해당하는 글꼴에 있는 Select this style을 클릭한다.

옆에 창이 뜰텐데 그 창의 embed를 누르면

이렇게 뜨는데  <link>는 html에, 밑에는 CSS의 body에 복붙하여 선언한다.

 

 

 

 

 

 

 

 

2.  내 컴퓨터에 있는 글꼴을 직접 적용하는 방법

 

새로운 CSS 파일을 만든다.

 

@font-face라고 적고 괄호를 연다.

 

font-family

font-style

font-weight를 선언한 후,

 

폰트의 경로를 적어주고 저장한다.

(https://css-tricks.com/snippets/css/using-font-face/ 이 사이트에서 복붙해와서 고쳐쓰는 것을 추천한다.)

 

 

 

 

 

 

 

 

 

 

이 폰트CSS를 아래와 같은 방법 중에 하나를 사용하여 적용한다.

 

① HTML에 CSS를 연결할 때와 똑같이 적용한다.

또는

 

② CSS의 최상단에 아래와 같이 작성한다.

그리고 body에 폰트CSS에서 썼던 폰트명을 그대로 font-family에 선언한다.