vue에 ttf 형식 폰트 적용하기

 

vue에 폰트를 적용하기 위해서 CDN 방식을 이용하는 가장 간편한 방식이 있다.

근데  만약에 CND 을 찾지 못한다면 ? 어떻게 해야 할까 ㅠㅠ 

 

프로젝트를 하는데 글씨체가 ttf 형식만 있어서 vue에 적용 해보려고 한다. 

 

[ TTF 파일 넣기 ]

 

 

 

우선 src -> assets -> fonts (폴더생성) 후

그 안에 ttf 폰트 파일을 넣어준다.

 

 

 

 

 

[ App.vue ]

그 후 App.vue 로 가서 아래와 같이 적어준다. 이렇게 하면 전역적으로 사용할 수 있는 font를 생성해 준 것이다. 

대신 단점.. 모든 ttf 파일을 하나씩 아래와 같이 쳐주어야한다... 

내가 지금 가진 글씨체가 무려 9개니까 그걸 다 적어줘야한다는건 저 세상 귀찮은 일이다...  (아직도 못했음) 

@font-face {
  font-family:'AppleSDGothicNeoB';
 /* font-family:'다른컴포넌트가서 불일 이름'; */
 
  src: url('assets/fonts/AppleSDGothicNeoB.ttf') format('truetype');
 /* src: url('폰트가 저장 되어 있는 공간') format('truetype');*/
 
  font-weight: 400;
 /* 폰트 굵기*/
}

 

[ 적용 ]

폰트를 적용하고 싶은 곳에가서 아래와 같이 폰트 font-family 이름을 적어주면 된다.

App.vue에서 해당 font-family의 굵기를 400으로 정했기에 자동으로 400굵기로 화면에 출력 된다. 

p {
    font-family: 'AppleSDGothicNeoB';
    font-size: 20px;
}