🎨 CSS 7 | @font-face(feat.온글잎 폰트)

 

 

 

 

온글잎 사이트에는 굉장히 예쁘고 다양한 폰트들이 있다. 

게다가 무료로 상업적, 비상업적 용도로 사용할 수 있다. 

이번 웹사이트에 온글잎의 선시우체를 적용시키려 한다. 

 

 

 

 

1. 다운받은 폰트 파일을 프로젝트 폴더 안에 저장한다. 

 

 

 

2. @font-face

 

font-face는 사용자가 직접 웹페이지의 텍스트 폰트를 적용할 수 있다. 

 

style.css

@font-face{
  font-family : '온글잎-선시우체'; //원하는 이름으로 지정한다. 
  src : url('./fonts/온글잎\ 선시우체.ttf'); //폰트가 저장돼 있는 경로
}

h1{
  font-family : '온글잎-선시우체';
}

 

 

예쁘게 적용된 걸 확인할 수 있다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

온글잎 선시우체 | 온글잎 무료폰트

 

@font-face - CSS: Cascading Style Sheets | MDN