프로그래밍 언어발행일 2022. 7. 21.원본 https://blog.naver.com/jword_/222823012501 ↗

구글웹폰트 1분만에 웹에 구현하기

구글웹폰트 1분만에 웹에 구현하기 — #구글웹폰트 인터넷에서 가장 빠르게 폰트를 가져오는 방법 웹사이트를 만들다보면, 어떤 폰트를 써야할지 ...

#Languages#Naver Blog

#구글웹폰트

인터넷에서 가장 빠르게
폰트를 가져오는 방법

웹사이트를 만들다보면, 어떤 폰트를 써야할지 고민이 될때가 많다. 원하는 폰트를 찾더라도 이 폰트를 어떻게 구현할지 고민이 많이 되는 것이 사실이다. 구글 웹폰트를 사용하면 누구든 1분안에 원하는 폰트를 구현할 수 있다.

구글 웹폰트 사이트

여기를 클릭하면 구글 웹폰트 사이트로 이동이 가능하다. 먼저 사이트에 들어가 보자.

들어가면 한국어,중국어,일본어,영어 등 다양한 언어에 맞는 폰트가 존재한다. 쭉 한번 둘로보면서 원하는 폰트를 찾아보자.

무료인가요?

모든 폰트는 무료로 사용이 가능하며 상업적으로 사용이 가능하다. 로고, 웹사이트, 어플, 교육용 자료, e-book,보석상,상점 폰트 등 모든 상업적 사용이 자유롭다. 자유롭다고 해서 퀄리티가 떨어지는 것도 아니고 정말 이쁘고 깔끔한 폰트들이 많다.

30초만에 이해하는 사용방법

거두절미하고 웹폰트 사용법에 대해 알아보자. 정말 간단해서 30초도 안걸린다. 천천히 따라해보자.

쇼핑몰 처럼 폰트를 고르다가 원하는 폰트가 있으면 클릭해주자.

클릭하면 좌측 이미지에 +버튼을 클릭해주자. 이후 +버튼이 -로 보이는 것을 볼 수 있고 페이지 우측 상단에 뭔가 빨간 불이 들어온 것을 볼 수 있다.

클릭해보면 내가 선택한 sacramento폰트가 들어온 것을 확인 할 수 있다.
여러개의 폰트를 클릭해서 담을 수 있는 장바구니 같은 곳이다.
link는 무시하고 @import를 클릭해주자.

코드가 나오는데 style태그를 제외하고 안의 내용만 복사해주자. 이 복사한 코드를 css/scss에 복붙해주기만 하면된다. 그리고 중요한게 있는데 밑에 적혀있는 CSS rules에 "Sacramento"를 기억해둬야 한다. 나중에 폰트 속성 조정할 때 이 글자를 넣어야 하기 때문이다.

SCSS/CSS에 적용

javascript 코드 예제

                                    @import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

body h1{
    font: 100px/1 "Sacramento";
}

아까 복사한 @import를 복사해주기만 하면된다. 이후 h1의 font속성에 크기를 조정해주고 "Sacramento"글자를 넣어주기만 하면 끝이다.