Quasar Framework default font 변경

Quasar프로젝트의 기본폰트를 Noto sans KR로 바꾸기 위해 삽질했다

 

우선 공식홈페이지에 가보면 

Typography | Quasar Framework

The default webfont embedded is Roboto. But it is not required. You can use whatever font(s) you like.

즉 기본 내장폰트는 Roboto 이지만, 바꾸고싶으면 맘대로 바꿔서 쓰라고 나와있다.
나는 이것을 Noto Sans KR 로 변경하려고했으나,, 실패했고 그냥 body { } 에 font family를 넣어서 변경했다

 

extras: [
  //'roboto-font'
]

우선 /quasar.conf.js 로 가서 extras: 속에있는 roboto-font를 주석처리했다

 

그다음 src/css/app.scss 로 이동해서 아래 명령어를 넣었다   

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

 

명령어는 구글 폰트 Noto Sans KR 사이트에서 복붙했다, 우측에 @import 부분에있음

내경우엔 Thin 100 을 사용하지않기때문에, 선택 하지않아서 명령어에 100이없고 300,400,500,700,900만 있다 

 

이제 마지막으로 src/App.vue 로 이동한뒤 style태그안에 아래 코드를 추가하면 끝이다

body{  
  font-family: 'Noto Sans KR', 'sans-serif';
}

대체폰트로 sans-serif를 넣어놨다

 

 

삽질한부분

quasar 기본폰트 자체를 변경하려고 했지만, 삽질한결과
그렇게하려면  /npm_modules/@quasar/extras/ 까지가서 수정해야되는거같았다.. 그래서 그냥 간단한 방법으로 변경

처음에 오타때문에 폰트가 적용되지 않았었는데, 글자가 변하길래 적용된줄알았다
하지만 공식문서에 나와있는 숫자 1과 화면의 숫자 1 모양이 다른것을 알게됐고, 다시 수정했다

 

 

 

---

그외 참고하면 좋은 고퀄리티 글들 

한글은 노토산스, 영문/숫자는 다른 폰트로 해주세요...👀 (feat. unicode)

웹폰트 최적화 하기

completely replace Roboto with another font (v1)?