[.CSS] 구글 폰트 적용하기

구글 폰트 사용하기

갓글에서 폰트까지 무료로 제공한다. 주소는 https://fonts.google.com/

홈페이지에서 적당한 폰트를 추가한 뒤, 아래와 같은 화면에서 사용할 글자체를 선택한다.

나는 css에서 사용할 것이므로 @IMPORT를 살포시 선택하여 다음과 같이 갓글님께서 선사하시는 css url을 수령하도록 한다.

stylesheet 사용하는 법은 뭐 다들 편한데로 사용하겠지만 나는 style.css에 다른 css 파일들을 추가하여 사용하는 편이므로 아래와 같이 적용한다.

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import 'test.css';  
...

이런 식으로 추가해주면 된다. 다만 해당 폰트를 사용하기 전에 import 되야 함을 유의! 위의 경우에서는 test.css에서 폰트를 사용하므로 test.css에 앞서서 선언이 되어있어야 한다.

test.css

body{
  font-family: 'Roboto', sans-serif;
}

위와 같이 작성하여 전체 페이지에서 폰트가 적용되도록 하면 끝!