본문 바로가기

WEB/CSS

[CSS] Google Fonts를 이용하여 폰트 불러오기

반응형

안녕하세요 그동안 방치해둔 블로그 이제부터 본격적으로 포스팅을 시작하게 되었는데요!



오늘 소개해드릴 사이트는 Google Fonts 라고 해서 구글에서 제공해주는 무료 웹폰트 사이트입니다



Google Fonts < 클릭시 새창으로 열립니다.



먼저 사이트에 접속하시면 아래 이미지와 같이 여러 종류의 폰트를 볼 수 있으실겁니다.






여러가지 폰트들을 보신후 자신이 쓰고싶은 폰트를 찾아서 + 모양 버튼을 눌러 담아주시면 





위와같이 + 모양의 버튼이 - 모양의 버튼으로 바뀜과 동시에 







우측 하단에 위 이미지와 같은 이런 알림창이 올라올겁니다.







우측 하단의 알림창 클릭하시면 이렇게 나오는데  STANDARD  아래에 <link href=" 로 시작하는 태그부분을 html의 <head> 태그 안에 넣어주시고



CSS 에서 스타일 또는 클래스 ,아이디에 Specify in CSS 아래에 있는 font-family 를 추가하여 복사해서 사용해주시면 



자신이 고른 폰트를 구글 api에서 불러와 자신의 웹 페이지에서 사용이 가능합니다. 



모르는 부분이나 궁금하신점 있으시면 댓글 남겨주시면 답변해드리겠습니다.



도움이 되셨거나 유용하다고 생각 되시면 공감 부탁드립니다. 






반응형