css-폰트적용하기

폰트 적용하기

1. assets 폴더 생성
2. assets -> css 폴더 생성
3. assets -> css -> fonts.css 파일 생성
4. 사용하는 css 파일에 fonts.css 파일 연결

@import './fonts.css';

5. fonts.css에서 사용하는 폰트 정리

• 폰트 확장자는 있는 그대로적어준다.
• font-weight의 경우 대표적인 수치는 아래와 같음
  - Light : 300
  - Regular : 400
  - Medium : 500
  - Semi-Bold : 600
  - Bold : 700

ex) 아래와 같이 폰트명, 경로/확장자 , font-weight를 각각 기입하면 됨.

@font-face{
    font-family: '폰트명';
    src: url('../fonts/폰트명-semi-bold.폰트확장자') format('폰트확장자');
    font-weight: 600;
}
@font-face{
    font-family: '폰트명';
    src: url('../fonts/폰트명-Bold.폰트확장자') format('폰트확장자');
    font-weight: 700;
}

6. 기본폰트 뭐로 적용되었는지 확인 후 적용하기