CSS 기초 다지기 - 2. 폰트 변경하기

폰트 변경 프로퍼티

폰트 변경은 font-family라는 프로퍼티로 할 수 있다.

브라우저에서 기본적으로 사용되는 폰트는 sans-serif, serif, monospace 이다.

h1{
	color: white;
    font-family: sans-serif;
}

 

 

 

 

 

기본 폰트 이외에 다른 폰트를 사용하고 싶을 때는 어떻게 할까??

기본 폰트 이외에도 구글에서 제공하는 다양한 폰트를 쉽게 가져다가 사용할 수 있다.

https://fonts.google.com/

Browse Fonts - Google Fonts

 

 

들어가면 이렇게 여러 종류의 폰트가 보이는데 원하는 폰트를 클릭한다.

 

 

 

나는 Protest Guerrilla라는 폰트를 쓰려고 한다. 오른쪽 상단의 Get font를 클릭한다.

 

 

 

그러면 이렇게 내가 저장해둔 폰트들을 볼 수 있는 곳으로 이동하게 되는데, 여기서 Get embed code를 클릭한다.

 

 

 

첫번째 박스에는 html에 추가해야하는 import 링크가 보이고 두번째 박스에는 각 폰트 적용 규칙이 보인다.

 

 

 

 

첫번째 박스에 있는 태그들을 html의 stylesheet를 적용하는 link 태그 위에 써준다.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css" />

 

 

이렇게 style 태그를 활용하는 방법도 있다. 

<style>
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap')
</style>

 

 

css 부분에 두번째 박스에 있는 코드를 넣어준다. 그리고 해당 코드 안에 있는 font-family를 적용하고자 하는 선택자 안에 프로퍼티 값으로 넣어주면 끝이다.

section {
    background: #ff1b68;
}

h1 {
    color: white;
    font-family: 'Protest Guerrilla', sans-serif;
}

.protest-guerrilla-regular {
    font-family: 'Protest Guerrilla', sans-serif;
    font-weight: 400;
    font-style: normal;
}

 

 

 

폰트가 잘 적용된걸 볼 수 있다.