<< 웹폰트를 CSS에 적용하기 1탄 >>
1. google fonts에서 원하는 폰트 클릭
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 원하는 폰트 두께들을 오른쪽의 + 버튼을 클릭해서 추가. (이탤릭체는 CSS상에서 font-style:italic;으로 스타일부여 가능하기때문에 굳이 선택할 필요 없음)
3. 오른쪽 상단의 아이콘을 클릭하면 내가 선택한 폰트 종류와 폰트의 두께들이 나옴.
4. @import에서 <style></style> 태그 내부안에 있는 @import url() 구문만 복사, 그리고 그 아래에 있는 font-family 구문도 복사해서
5. CSS에서 복사한 구문들을 @charset "utf-8"; 아래에 @import 구문을 붙여넣기.
복사한 font-family는 폰트를 적용하고싶은 곳에 붙여넣기
(전체에 폰트를 적용하고싶으면 *{}안에 붙여넣기한다. (*는 전체 선택자를 의미)
6. 주의사항 !!!!!
여러가지 폰트를 사용하고 싶을 때
원하는 폰트들을 선택해서 두께를 추가한 다음 @import를 똑같이 복사 붙여넣기.
-> 기본적으로 전체에 적용한 폰트는 전체 선택자에 font-family를 적용하고
-> 부분적으로 폰트가 다른 부분에는 클래스를 설정한 다음
-> html의 폰트를 적용할 태그 내부에 생성한 폰트 클래스를 작성해줌.
<<CSS>>
<<HTML>>
7. 주의 사항!!!!!
영문과 한글 혼용시,
font-family: '영문서체 명', '한글서체명', serif;
==> 영문세체는 한글영역에서 표현 못함 / 한글서체는 영문과 한글을 모두 표현 가능