youns119

게임 클라이언트 개발자를 꿈꾸는 중

[Blog] 폰트 적용

Date :   Updated :

🔤 폰트

뭔가 블로그 폰트가 맘에 안들어서 주기적으로 바꾸게 되는데, 그 때마다 헷갈린다. 내가 어떤 폰트를 쓰고 있는지, 그 폰트를 어디서 정의했는지, 어떻게 추가했는지 등등… 그래서 한 번 정리해 놓으려고 한다.

참고로 여기 나오는 방법은 완전히 개인적인 방법으로, 다른 사람의 블로그를 참고하면 더 좋은 방법이 있을 수도 있다.

🔍 폰트 찾기

일단 맘에 드는 폰트를 찾아야 한다. 나는 그냥 한 사이트에서 모든 폰트를 찾아 쓰고 있다.

여기 웬만하면 다 있는데, 다른 곳에서 찾아도 뭐 상관 없을 것이다.

📂 폰트 Import

맘에 드는 폰트를 찾아서 클릭해서 들어가보면, 이런 창이 나온다.

Font

여기서 오른쪽의 웹폰트로 사용 부분을 복사하면 이러한 코드가 나온다.

@font-face {
    font-family: 'ChangwonDangamRounded';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/ChangwonDangamRound-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

이게 우리가 이 폰트를 Import 하는데 필요한 코드라고 볼 수 있다. 이제 여기부터는 사람마다 모두 방법이 다를 수 있겠지만, 현재 내가 쓰는 방법으로 설명하겠다.

\_includes\head\custom.html 이라는 HTML 파일이 하나 있다. 여기에 폰트를 추가해준다.

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<style>
@font-face {
    font-family: 'ChangwonDangamRounded';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/ChangwonDangamRound-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
</style>

이런식으로.

맨 위에 <link ~~ crossorigin> 부분은 나도 무슨 역할인지는 정확하게는 모르지만 어떤 최적화를 해준다고 해서 붙인거다. 중요한 것은 밑에 <style> 안에 아까 복사한 폰트의 코드를 넣는 것. 그대로 넣기만 하면 된다.

🖋️ 폰트 사용

자 이제 그럼 폰트 Import는 끝났으니 사용만 하면 된다. jekyll theme의 Github Blog들은 제각각 이미 쓰고 있는 폰트들이 있고, 그 폰트들은 저마다의 font-family로 묶여있다. 쉽게 말하자면 자주 쓰이는 폰트들을 크게 몇 개의 변수로 묶어 놓은 거라고 보면 편하다.

이 font-family는 대표적으로 $serif, $sans-serif 등이 정의되어 있고, 이는 _variables.scss에서 확인할 수 있다. 그러나 이러한 default 값들을 함부로 건들이면 나중에 복구도 힘들고, 어떤 부작용을 초래할지 모른다. 따라서 나는 다른 파일에서 이 값들을 덮어씌우는 방식으로 하기로 했다.

\assets\css\main.scss 이라는 파일이 있는데, 여기서 위의 font-family를 재정의 해준다.

$sans-serif: "GowunDodum", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
$serif: "GyeonggiMillenniumBackground", Georgia, Times, serif;
$font-custom: "ChangwonDangamRounded";

나는 현재 $sans-serif에 “GowunDodum” 폰트, $serif에 “GyeonggiMillenniumBackground” 폰트를 재할당했고, $font-custom라는 나만의 커스텀 변수를 만들어서 “ChangwonDangamRounded” 폰트를 넣었다.

이렇게 하면 각각의 폰트들이 이전의 폰트들을 덮어씌워서 적용이 될 것이다. 물론 각각의 폰트가 블로그의 어떤 영역, 어떤 부분의 폰트를 대체하게 되는지는 직접 부딪혀가며 알아가야 한다.

💭 팁

막상 폰트를 적용하고 나서 어디에 적용되는지, 그리고 어떤 영역의 폰트는 다르게 하고 싶은데 어떻게 하면 좋을지 헷갈리면 검사 기능을 잘 활용하면 된다. 블로그 상의 원하는 영역에 우클릭, 검사를 누르면 이러한 창이 뜬다.

Font

여기서 오른쪽 창을 보면 현재 영역 page__title의 font-family가 “GowunDodum” 이라는 것을 알 수 있다. 그러면 이제 vscode를 열어서 page__title를 검색하고 font-family를 찾으면 한결 수월하다!

Comments

Related Posts