브라우저에서 제공되는 기본 폰트만 사용하는 것이 너무 밋밋하게 느껴질 때 웹폰트를 사용하는 방법을 알려드리려고 합니다.
웹 컨텐츠의 텍스트를 원하는 폰트로 꾸미는 방법은 여러 가지가 있습니다. 다양한 폰트를 제공하는 미리캔버스 같은 사이트를 사용하는 것도 한 방법인데요.
하지만 결국 이미지로 변환해서 사용하는 것이기 때문에 다량의 텍스트 컨텐츠를 모두 이렇게 만들기는 어렵습니다. 실시간으로 바뀌는 가변형 텍스트 데이터인 경우에는 더더욱 이런 식으로 구성하는 게 어렵죠.
그럴 때는 구글에서 무료로 제공하는 웹폰트를 사용하는 것이 효율적일 수 있습니다.
1. 구글 웹폰트 사이트에 접속합니다.
Google Fonts 사이트 접속
2. 웹 폰트 중에서 마음에 드는 것을 선택합니다.
접속하시면 아래와 같이 여러 가지 웹폰트를 확인하실 수 있습니다.
마음에 드는 폰트를 클릭하시면 아래와 같이 상세 페이지로 넘어가는데요.
아래로 스크롤 하시면 해당 폰트의 다양한 스타일을 보실 수 있습니다. 아래 스크린샷에는 하나밖에 없지만 글자의 굵기에 따라 여러 가지 스타일이 제공됩니다. 그 중에서 마음에 드는 스타일의 오른쪽에 있는 파란색 + 버튼을 눌러주세요. 그러면 선택한 폰트가 장바구니(?)에 담기게 됩니다. 뒤로 돌아가셔서 이런 식으로 마음에 드는 폰트와 스타일을 여러 개 담으실 수 있어요. 물론 1개만 담으셔도 상관없습니다. ^ㅅ^
사용하실 웹폰트를 모두 담으셨다면 아래와 같이 화면 오른쪽 위에 있는 장바구니 메뉴를 눌러주세요. 마우스를 올리면(View selected familes' 라는 툴팁이 뜰 거예요.
그러면 장바구니 창이 오른쪽에 열릴 거예요. 아래 스크린샷을 보면 웹폰트 중에서 'Do Hyeon' 체와 Black Han Sans' 체가 선택되어 있는 게 보이네요. 선택한 웹폰트를 사용하지 않으실 거라면 해당 폰트/스타일에 있는 - 버튼을 눌러주시면 장바구니에서 사라집니다. 'Remove All' 누르시면 담긴 모든 폰트가 다 사라지구요.
3. 선택한 웹폰트를 사이트에 적용하세요.
방법은 매우 간단합니다. 아래 스크린샷처럼 'Use on the web'에서 'Link'나 'import' 중 하나를 선택하시고 그 아래에 있는 소스를 여러분 웹 페이지의 <head>와 </head> 사이에 삽입하세요. 티스토리는 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 으로 들어가셔서 삽입하시면 됩니다.
그리고 그 폰트를 사용할 부분에다가 CSS 코드를 추가하시면 됩니다. CSS 적용하는 방법은 다양하므로 여기서 별도로 설명을 드리지 않을게요. 가장 간단한 예시를 보여드리면 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&display=swap'); </style> </head> <body> 안녕하세요.<br> <div style="font-family: 'Do Hyeon', sans-serif;">이 폰트는 도현 체입니다.</div> <div style="font-family: 'Black Han Sans', sans-serif;">이 폰트는 블랙 한 산스 체입니다.</div> </body> </html> | cs |
여기까지 구글에서 제공하는 웹폰트를 여러분의 사이트/블로그에서 사용하는 방법을 살펴보았습니다. 도움 되셨길 바라요!!!
'IT' 카테고리의 다른 글
| [php] Ajax를 이용하여 실시간 검색 추천어 보여주기 (0) | 2023.02.05 |
|---|---|
| me2.kr, 이 서비스를 사용하지 마세요? (0) | 2022.09.10 |
| 티스토리 블로그 본문 링크에 예쁜 밑줄 효과 주는 방법 (0) | 2022.06.18 |
| 초보자도 이해가 되는 콜센터 시스템 기초 개념 (0) | 2022.03.26 |
| 티스토리 URL에서 카테고리 파라미터 없애기 (0) | 2021.12.26 |
댓글