공부하는 식빵맘 👱‍♀️

공부하는 식빵맘 👱‍♀️

반갑습니다 :)

[Github 블로그] 웹 폰트 설정하기 (+폰트 추천)

Date:     Updated:

카테고리:

태그:

1️⃣ 무료 웹 폰트 사이트에서 사용할 폰트를 골라보자

  1. 눈누 https://noonnu.cc/index
  2. 구글 폰트 https://fonts.google.com/

내가 아는건 이렇게 두 사이트다. 이 두 사이트에서 예쁜 폰트를 골라보자!

🔥 첫 번째 추천 사이트 : 눈누

image

image

눈누에서 원하는 폰트를 클릭하면 웹 폰트로 사용 이라는 부분이 있다. 임포트 해야할 코드이니 복사하도록 하자!

@font-face {
    font-family: 'Cafe24Oneprettynight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');

여담으로 내가 현재 눈누로부터 임포트하여 블로그에 적용시킨 폰트는 아래 2가지이다. 나중에 폰트를 또 바꿀지도 모르지만..!

  1. 이롭게 바탕체 https://noonnu.cc/font_page/4
  2. 카페24 고운밤 https://noonnu.cc/font_page/342


🔥 두 번째 추천 사이트 : 구글 폰트

image

image

구글 폰트에서 Language 에서 한국어르 설정하면 한국어를 지원하는 폰트 목록을 볼 수 있다. 구글 폰트에서 원하는 폰트를 찾았다면 위와 같이 오른쪽에 “Select this Style” 을 클릭하자.

image

image

폰트를 선택하고 상단에 있는, 사진 속 체크된 곳을 클릭하면 임포트 코드를 복사할 수 있는 창이 오른쪽에 뜨게 된다.

  • CSS 에서 Import 할 것이라면 👉 @Import 코드로 복사
  • HTML 에서 Import 할 것이라면 👉 <link> 코드로 복사

아래에서 위의 2 가지 방법을 다 살펴볼 것이다. 그러나 성능 면에서 좀 더 나은 방법은 <head> 태그 안에 <link>를 사용하여 웹 폰트를 임포트 하는 것이라고 들었다! 웹 지식이 얕은 탓에 왜 그런지에 대한 이유는 잘 모르겠다..😅 아무튼 나는 후자를 선택했다.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

<link href="https://fonts.googleapis.com/css2?family=Coming+Soon&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet" >

여담으로 내가 구글 폰트로부터 임포트하여 블로그에 적용시킨 폰트는 아래 2가지이다. 나중에 폰트를 또 바꿀지도 모르지만..!

  1. Coming Soon
  2. 나눔 고딕 코딩


2️⃣ 임포트 하기

1) CSS 에 Import 하는 방법

📜main.scss

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

웹코드를 복사해서 임포트하면, 굳이 폰트 파일을 다운 받아 로컬 환경에 저장할 필요가 없다. 이 코드를 복사하여 “📜main.scss” 파일에 붙여 넣도록 하자. 나는 minimal-mistake 테마를 사용하고 있고 이 테마의 메인 css 파일은 📜main.scss 파일이기 때문에 이 곳에 코드를 붙여넣어 임포트 하였지만, Import 문을 모아둔 css 파일이라면 어디든 상관없을 것이다. 그대로 붙여넣기 해주면 된다.


2) HTML 에 Import 하는 방법

📜default.html

내가 쓰고 있는 minimal-mistake 는 📜default.html 에 <head> 태그를 가지고 있다. 그래서 여기에 넣어주었다.

<!doctype html>
<html lang="ko" class="no-js">
  <head>
    <!--폰트 : "Nanum Gothic Coding", "Coming Soon"-->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Coming+Soon&family=Nanum+Gothic+Coding&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Coming+Soon&family=Nanum+Gothic+Coding&display=swap">
    
    <!--폰트 : "Iropke Batang"-->
    <link rel="preload" as="style" href="https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css">

역시 “웹알못” 이지만.. <link rel="preload" .. > 태그를 앞에 써주면 성능상 더 빠르다고 하더라! (구글 PageSpeed Insight 를 참고하였다.)


3️⃣ css 에서 폰트 적용하기 👉 font-family : “폰트 이름”

font-family : "Nanum Gothic"

이런식으로 폰트를 적용하고자 하는 CSS 영역에 위와 같은 코드 font-family : "폰트 이름"을 넣어주면 된다.

🔥 폰트 이름 확인 하는 방법

구글 폰트

image

구글 폰트의 임포트 코드 복사하는 곳에서 폰트 이름을 확인할 수 있다. 위 사진 속 폰트의 이름은 “Roboto”인 것이다.


눈누

@font-face {
    font-family: 'Cafe24Oneprettynight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

이 폰트의 이름은 “Cafe24Oneprettynight” 인 것이다. 이런 형태의 코드는 font-family 를 확인하면 된다.

@import url('https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');

근데 이런 형태의 코드는 폰트 이름이 불분명했다. 폰트마다 다르겠지만 위 링크의 경우엔 폰트 이름이 “font-iropke-batang” 이 아니였다..! 즉, 링크만으로 폰트 이름을 알 수가 없었다.

image

그래서 이롭게 바탕체를 만든 회사의 사이트에 찾아가보니 이렇게 친절하게 “Iropke Batang” 이라고 알려주었다..! 링크만으로 폰트 코드명을 확인할 수 없다면 이렇게 해당 폰트를 제작한 사이트의 튜토리얼을 참고해보자. (마찬가지로, ‘눈누’에서는 @import 코드만 제공하고 있는데 이롭게 바탕체 공식 사이트에 들어가니 <link> 코드도 알려주고 있었다.)


🔥 내가 적용한 방법

📜_variable.scss

$serif: "Coming Soon", Georgia, Times, serif !default;
$sans-serif: "Iropke Batang", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: "Nanum Gothic Coding", Monaco, Consolas, "Lucida Console", monospace !default;
$cute: "Cafe24Oneprettynight" !default;

내가 사용하고 있는 minimal-mistake 테마는 📜_variable.scss 파일에 전체적인 css 파일들이 사용할 “전역 변수”를 한데 모아 선언하고 있다. $serif, $sans-serif, $monospace 는 minimal-mistake 자체에서 원래 있던 변수이고 $cute는 내가 만든 변수이다.(대충 지었다..) 이 변수에 위에서 알아낸 “폰트 이름”들을 맨 왼쪽에 적어준다. 왼쪽에 적힌 폰트일 수록 우선순위를 높게 설정해주는 것이기 때문에 폰트가 블로그에 반영되기 위해선 가장 왼쪽에 써주어야 한다.

내가 설정한 변수로 예를 들자면

font-family: $serif;

이 CSS 영역의 폰트는 “Coming Soon” 폰트가 될 것이고

font-family: $monospace;

이 CSS 영역의 폰트는 “Nanum Gothic Coding” 폰트가 될 것이고

font-family: $cute;

이 CSS 영역의 폰트는 “Cafe24Oneprettynight” 폰트가 될 것이다!

이렇게 변수로 대입하지 않고 직접 font-family: "Roboto"; 이런식으로 해줘도 상관없다!


4️⃣ 마무리

반영된 css 파일들을 저장하고 커밋-푸쉬 하면 적용 완료!


🤔 TMI

블로그 커스텀에 대한 포스팅을 9 개월만에 하게 되었다. 여유 생길 때마다 하나씩 올려봐야겠어..🔥

image

폰트 바꾸니까 블로그가 더 기요워졌다.. 희희 진작 바꿀걸!


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Blog 카테고리 내 다른 글 보러가기

댓글 남기기

최근 글 10 개 :)