w3.css
Google 글꼴 페어링
훌륭한 디자인을 위해서는 좋은 글꼴 조합이 필수다.
Google Fonts는 무료로 사용할 수 있으며 1,000개가 넘는 글꼴을 선택할 수 있다.
어떻게 페어링하면 좋을지 몇 가지 인기 있는 Google 웹 글꼴 페어링을 알아보자.
메리웨더와 오픈산스
제목에는 “Merriweather” 글꼴을 사용하고 텍스트에는 “Open Sans”를 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Merriweather, serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
우분투와 로라
제목에는 “Ubuntu” 글꼴을 사용하고 텍스트에는 “Lora”를 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: Lora, serif;
font-size: 16px;
}
h1 {
font-family: Ubuntu, sans-serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
에이브릴 팻페이스와 포핀스
제목에는 “Abril Fatface” 글꼴을 사용하고 텍스트에는 “Poppins” 글꼴을 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: Poppins, sans-serif;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
신젤과 파우나 원
제목에는 “Cinzel” 글꼴을 사용하고 텍스트에는 “Fauna One” 글꼴을 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: 'Fauna One', serif;
font-size: 16px;
}
h1 {
font-family: Cinzel, serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Fjalla One과 Libre Baskerville
제목에는 “Fjalla One” 글꼴을 사용하고 텍스트에는 “Libre Baskerville”을 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
}
h1 {
font-family: 'Fjalla One', sans-serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
스페이스 모노 앤 뮬리
제목에는 “Space Mono” 글꼴을 사용하고 텍스트에는 “Muli”를 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: Muli, sans-serif;
font-size: 16px;
}
h1 {
font-family: "Space Mono", monospace;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
스펙트럴과 루빅
제목에는 “Spectral” 글꼴을 사용하고 텍스트에는 “Rubik” 글꼴을 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: Rubik, sans-serif;
font-size: 16px;
}
h1 {
font-family: Spectral, serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
오스월드와 노토산스
제목에는 “Oswald” 글꼴을 사용하고 텍스트에는 “Noto Sans”를 사용한다.
1단계) HTML 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans"> <!-- 이 코드는 head의 style 위에 넣는다. -->
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>2단계) CSS 추가
body {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Oswald, sans-serif;
font-size: 46px;
}예제
Beautiful Norway
Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.