한글과 영어 폰트 따로 설정하기
포스트
취소

한글과 영어 폰트 따로 설정하기

오늘따라 문득 블로그 한글 폰트는 나눔고딕으로 쓰고 영어 폰트는 Consolas로 쓰고 싶다는 느낌이 강하게 들어서 좀 찾아봤다. 전체 폰트는 원래 알던 CSS 그대로 바꾸면 되고, 이제 거기서 글자별로 따로 설정하는 옵션을 찾아야 했다. 한컴에서 한글 써보면 한글 글씨체랑 영어 글씨체를 따로 설정할 수 있었으니 이것도 되지 않을까 하는 근거 없는 확신이 있기도 했다.

어쨌든, 성공했으니까 이 글을 쓰는 거지. 참고 링크는 @font-face unicode-range 사용법이다. 이 블로그는 chirpy 테마인데 css 파일이 여러 개로 나뉘어 있어서 그 중에 폰트를 import하는 부분과 font-family로 설정하는 부분이 있는 파일을 찾아서 바꿔뒀다.

근데 좀 문제가 있긴 했다. 처음엔 Consolas라는 이름으로 나눔고딕과 Roboto Mono를 섞어서 설정하고 제대로 적용되는 걸 확인했는데, Consolas가 마이크로소프트 서체래서 괜히 저작권 관련 문제가 생길까봐 이름을 바꿨더니 적용이 안 됐다. 다시 Consolas로 되돌리니까 적용이 잘 되긴 했는데 왜 됐는지, 왜 안됐는지 이유는 모른다.


23.07.08 업데이트

이름을 Console로 쓰면 안되고 Consolas로 써야만 되고, 모바일에서는 그나마도 보이지 않는 이유를 알았다! 내가 url을 잘못 넣었을 뿐이었다. 구글 폰트에서 @import로 써주는 링크를 넣으면 안 되고, 실제 폰트 파일이 있는 링크를 써야 했다. 아무래도 내가 쓴 링크가 잘못된 것 같다는 심증은 있었는데, 그래서 어떤 링크를 써야 맞는건지는 몰라서 이것저것 건드려보다가 구글이 준 링크 클릭해보고 찾았다. 지금 블로그 폰트는 나눔고딕 베이스에 영어랑 숫자만 제트브레인 모노 폰트로 섞었다. 이름은 ‘Console’로 썼다. 모바일에서도 똑같이 나오는 걸 확인했다!

처음 빌드 성공하고서도 약간 실수가 있었는데 font-face 속성은 나중에 쓰는 게 우선적으로 적용되는 거라, 나눔고딕 베이스에 덮어쓰기를 하려면 제트브레인 폰트가 밑으로 가야 했다. 구글 링크에 있던 내용 그대로 붙여넣다 보니 제트브레인 폰트에 나눔고딕이 덮어쓰기 돼서 나눔고딕 폰트만 나왔었다. 지금은 고쳤다!

지금 이 블로그 운영의 문제가 루비를 설치하지 않아서 변경 결과를 확인하려면 매번 커밋을 올려서 깃허브 액션으로 빌드된 블로그를 확인해야 한다는 건데, 오늘 wsl을 설치해보려다 너무 오래걸려서 포기했다. 다음부터 설정 바꿀 때는 리눅스 노트북으로 쓰든가 해야지 불편해서 쓰겠나..


23.07.08 업데이트 (2)

생각을 해보니까 어차피 나눔고딕을 기본으로 쓰고, 영문자랑 숫자만 제트브레인으로 바꿀 거면 나눔고딕이라는 이름으로 제트브레인만 덮어씌우면 되는 거 아니었을까? 뭐하러 119개씩이나 되는 나눔고딕 font-face를 다 쓴 거야 그거 다 합치면 그냥 나눔고딕인데. 그래서 바꾸기로 했다. 하는 김에 모노 폰트도 바꿔서 나눔고딕이라는 이름에 영문자랑 숫자만 Roboto Mono 폰트로 덮어쓰기.

이 기사는 저작권자의 CC BY-NC-ND 4.0 라이센스를 따릅니다.

[Backend] 인터넷이 뭔데

우분투에서 chirpy 테마 github pages 만들기