요즘 웹사이트를 제작할 일이 많다. 난 웹 프로그래밍은 어린 시절 PHP와 Java Script, 그리고 옛날에 나모 웹에디터, 드림위버에 HTML 혼합해서 하던 그런 기억밖에 없고, 그마저도 실전 경험이 부족하다. 그럼에도 불구하고 요즘에는 워드프레스라는 훌륭한 툴이 나와있어서 더듬더듬 하나씩 완성해나가는데 재미가 있다.
어쨌든 워드프레스 기반이나 웹에서 글을 쓰려고 하면 한글 폰트가 항상 문제다. 웹에서 한글 폰트가 지원되지 않는 경우가 대부분이기 때문이다. 이럴때는 구글의 웹폰트를 import 하는 식으로 쓰는 것이 가장 속도면에서 좋다.
먼저 구글 웹폰트 사이트에 접속해서 원하는 폰트를 찾아야 한다. 2021년 4월 6일 기준 한글 폰트는 28가지가 있다. fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
[Korean]이라고 되어 있는 부분을 언어를 바꿔주면 다른 나라 것도 나온다.
- 노토산스KR, 나눔고딕, 나눔명조, 고딕A1, 나눔펜스크립트, 나눔고딕코딩, 노토셰리프KR, 블랙한산스
- 도현, 나눔브러시스크립트, 주아, 선플라워, 구기, 개구, 독도, 하이멜로디
- 송명, 감자플라워, 연성, 동해동도, 큐트, 스타일리시, 가난한이야기(?), 기랑해랑, 흑과백그림, 싱글데이(?)
여기에 있는 폰트 그냥 쭉 써보려고 했는데 번역하니까 이상한 것 같기도 하다. ㅎㅎ
지속적으로 추가가 되는 듯 하다. 불과 몇달전에 들어왔을 때보다 더 늘었다.
이제 폰트를 설정하는 법을 알아보자.
1. 원하는 폰트를 클릭하면 설정창이 나온다. 그럼 해당 부분에서 크기, 굵기 등을 지정해서 테스트 한 후 [Select this style] (사진에서는 Remove this style 버튼이 토글된 것)을 누른다.
2. 오른쪽에 창이 뜨면 [import]를 누르고 해당 <style>부터 </style>까지 복사한다.
(<link>를 선택하면 스타일시트가 아니라 홈페이지의 <head> 부분에 쓰게 된다. 편한대로)
3. 자 그럼 이제 해당 글씨체를 쓸 수 있게 되었다. <style>부터 </style>을 홈페이지에 추가한다.
(워드프레스를 쓴다면 해당 테마의 [외모]-[사용자정의하기] 추가 CSS 부분에 입력하면 더 편리하다, 만약 추가CSS가 없다면 테마편집기의 style.css에 넣어줄 수 있다.)
만약 모든 글씨체를 해당 글꼴로 바꾸고 싶다면 아래 그림처럼 더 추가해주면 됩니다.
<style>
@import url('https://fonts.googleapis.com/css2?
family=Song+Myung&
display=swap');
</style>
4. 원하는 곳에 태그 등을 이용한다. 위에서는 font-family: 'Song Myung', serif; 라고 되어 있다. 아래와 같은 방법으로 써주면 된다. 참고로 폰트는 적용이 안될때를 대비해서 한 개가 아닌 두 개 이상 써 주기도 한다.
<p style="font-family: 'Song Myung', serif;"> 글쓰기 </p>
<span style="font-family: 'Song Myung', serif;"> 글쓰기 </span>
자 그럼 적용 완료!!