공부하는 반백수

자유로운 삶을 위한 준비 ☆


IT·인터넷/티스토리 블로그

오디세이스킨 폰트 확인하고 변경하기 feat. 구글 웹 폰트

자유로운 수짱 2020. 9. 24. 23:55

 

구글 웹폰트를 사용하는 방법은 이전 글인 쇼핑몰에 구글 웹폰트 적용하기에서 다루었습니다만, 티스토리 블로그에도 적용이 가능하기 때문에 한번 더 포스팅합니다. 사용중인 스킨인 오디세이에 실제로 어떻게 적용이 되는지 간단히 확인해보겠습니다 :)

 

 

카페24 쇼핑몰에 구글 웹폰트 적용하기는 아래 글 참고해주시면 됩니다.

[카페24 쇼핑몰] - 스마트 디자인 쇼핑몰에 구글 웹 폰트 적용하기

 

 

 

구글 웹폰트에 접속해서 적용 원하는 한글 웹폰트를 찾아보겠습니다.

fonts.google.com/

 

 

Language 클릭하여 Korean 선택하면 한글 웹폰트를 확인할 수 있습니다.

 

 

 

Sunflower라는 폰트가 괜찮아 보여서 적용해보겠습니다.

상세페이지로 들어가서 300, 500, 700 굵기 모두 선택하여 Embed의 코드 복사해줍니다.

 

 

 

티스토리 스킨 편집창 > html 편집창에 접속하여  <head> 태그 내의 <link...> 태그들 중 가장 아래에 붙여넣어 적용해주세요. 다음으로 CSS 편집창으로 넘어가주세요.

 

 

 

CSS 편집창 대략 233번 쯤에서 font-family가 설정된 body 태그를 찾을 수 있습니다. 구글 웹폰트에서 가져왔던 폰트의 이름 'Sunflower' 를 입력해줍니다. 쉼표 반드시 찍어주세요. 적용하면 폰트가 스킨 전체에 설정됩니다!

 

 

 

아래 이미지에서 Sunflower 폰트로 설정된 것 확인할 수 있습니다. 음.. 계속 유지할만한 폰트는 아닌 것 같으니 어서 삭제를 했구요. 이러한 방식으로 적용이 가능하다는 것만 알아두시면 좋을 것 같습니다.

 

 

 

자주 접해보지 않은 폰트는 미리보기로 보는 것보다 실제 적용해봐야 느낌이 옵니다. 이게 맞는지 아닌지 전체적인 느낌을 파악할 수 있습니다. 적용해보고 아니면 삭제하면 되니까요 :)

 

 

웹 폰트에 관한 팁이 있다면,

웹 폰트는 여러개 설정하면 사이트가 무거워집니다. 폰트를 다른 서버에서 로딩해서 랜더링 해야 하는데 시간이 많이 소요되겠지요. 그렇기 때문에 한두 개만 스킨에 설치하는 것을 추천드립니다. 오디세이에는 Noto Sans KR 폰트가 로드되는 것으로 보입니다. 이외 순서대로 설정된 Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif 폰트들은 사용자의 컴퓨터 내에 설치되어있다면 자동으로 브라우저상에 랜더링 되는 폰트입니다.

 

더 궁금하신 부분 있으시면 댓글 남겨주세요 :D