퍼블리싱/html css js

[리액트]less , font 적용하기

임고미 2020. 9. 2. 14:23
728x90
300x250

  나는 작업을 하기 직전 reset을 먼저 사용해주는데, css와 달리 less 에서는 잘 적용이 되지 않았다.
해결방법을 찾아야겠다.

1. 우리는 보통 다운받아 사용하기에 다운받을 폴더를 생성한다.

src/assets 안에 폴더 만들어주기

2. font-face 설정

@font-face {
  font-family: 'HELVETICA LT 25 ULTRA LIGHT';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/HELVETICA-LT-25-ULTRA-LIGHT.ttf') format('truetype');
}

디자이너에게 truetype밖에 전달받지못해 저렇게 작성해 놓았지만
다른 format도 설정해 주는게 좋다.

font-family : 자유롭게 적어도 좋다.
그런데 만약, 나처럼 띄어쓰기를 넣어서 이름을 넣으려면 ' ' 을 꼭 넣어줘야 한다고 한다.
만약 heceticaLtLight 같이 작성했다면, 저 font-face를 사용할때 ' ' 을 사용할 필요가 없다

ex) 
경우 1.

@font-face {
  font-family: 'HELVETICA LT 25 ULTRA LIGHT';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/HELVETICA-LT-25-ULTRA-LIGHT.ttf') format('truetype');
}

.HelveticaLtLight {
  font-family: 'HELVETICA LT 25 ULTRA LIGHT';
  font-weight: 300;
}

 

경우 2.

@font-face {
  font-family: HelveticaLtLight;
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/HELVETICA-LT-25-ULTRA-LIGHT.ttf') format('truetype');
}

.HelveticaLtLight {
  font-family: HelveticaLtLight;
  font-weight: 300;
}

font-weight: font-face에서 정해주면 다음과 같이 font-family 불러와서 만들어줄때 따로 적을 필요가 없다.

@font-face {
  font-family: HelveticaLtLight;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/HELVETICA-LT-25-ULTRA-LIGHT.ttf') format('truetype');
}

.HelveticaLtLight {
  font-family: HelveticaLtLight;
}

 

그리고 포인트는 이곳 저곳에서 이 font.less를 로드해주면 안된다.

나는 assets/less/index.less 안에서 한번 로드를 해주었고.
이것을 다시 src/App.tsx 안에서 로드해 주었다.

import 'assets/less/index.less';

그런데 언젠가 font.less가 한번 제대로 로드가 안된적이 있는데...

이럴때 여러가지 방법을 시도해보고 그래도 안되면
최후의 수단으로 

src/index.less 안에 넣어주면 문제해결이 뚝딱 된다..

물론 좋은 방법인것같지는 않다.

 

* ie 적용 : 

ie에서는 적용한 폰트가 안나올 수도 있다.
해결방법은 간단하다.

font-family: Helvetica, sans-serif;

font-family에 저 sans-serif만 넣어주면 간단히 해결된다!

728x90
300x250