W3.CSS 구글 폰트
W3.CSS를 사용하면 새 글꼴을 매우 쉽게 추가할 수 있습니다.
- 사용이 매우 간편함(CSS 및 HTML만 해당)
- 외부 글꼴 라이브러리 무제한 사용(예: Google 글꼴)
- 모든 최신 브라우저에서 작동
로보토입니다
소피아입니다
소피아 온 파이어
웹 만들기!
웹 만들기!
웹 만들기!
웹 만들기!
웹 만들기!
Google 글꼴 사용
Google 글꼴은 무료로 사용할 수 있으며 1000개 이상의 글꼴 중에서 선택할 수 있습니다.
웹페이지 헤드에서 Google 글꼴에 대한 링크:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
그런 다음 사용 위치에 대한 CSS를 추가합니다.
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
또 다른 예
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
글꼴 클래스 만들기
웹페이지 헤드에서 Google 글꼴에 대한 링크:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
그런 다음 글꼴 클래스를 만듭니다.
예시
.w3-sofia {
font-family: Sofia, cursive;
}
웹 페이지에서 글꼴 클래스를 사용합니다.
예시
<p class="w3-sofia">Making the Web!</p>
웹 만들기!
예시
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
웹 만들기!
예시
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
웹 만들기!
예시
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
웹 만들기!
예시
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
웹 만들기!