w3.css
구글 글꼴
W3.CSS를 사용하면 새 글꼴을 추가하는 것이 매우 쉽다.
- 사용하기 매우 쉽다(CSS 및 HTML만 해당).
- 외부 글꼴 라이브러리 무제한 사용(예: Google 글꼴)
- 모든 최신 브라우저에서 작동
Google 글꼴 사용
Google 글꼴은 무료로 사용할 수 있으며 선택할 수 있는 글꼴이 1000개 이상 있다.
웹페이지 헤드에 Google 글꼴 링크를 추가한다.
예제
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
기본 예시
예제 보기다른 예시
예제
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
기본 예시
예제 보기글꼴 클래스 만들기
웹페이지 헤드에 Google 글꼴 링크를 추가한다.
예제
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
그런 다음 글꼴 클래스를 만든다.
예제
.w3-sofia {
font-family: Sofia, cursive;
}
웹페이지에서 글꼴 클래스를 사용한다.
<p class="w3-sofia">Making the Web!</p>
기본 예시
예제 보기참고
W3C School - W3.CSS Google Fonts
공부 목적 블로그