A. link로 첨부하는 폰트
B. otf / ttf 형식의 파일로 폰트를 다운 받은 경우
로 나눌 수 있다.
A. link로 첨부하는 폰트
https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0/%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-%EB%B0%8F-navbar
Node JS 첫걸음/게시판 만들기: 게시판 - 프로젝트 생성 및 navbar - A MEAN Blog
/* * 이 강의는 2016년 처음 작성되었으나 2020년에 모든 코드와 강의가 update되었습니다. * 2016년 게시물은 Archive되었습니다. -> 2016년 버전 보기 */ 지금까지 hello world 강의, 주소록 만들기 강의를 통
www.a-mean-blog.com
우선 참고할만한 블로고 주소
1. fonts.google에 들어간다 그리고 원하는 폰트를 찾는다
2. 만약 selected family 창이 뜨면
3. 위의 <link>를 복사해서
head.ejs 부분에 넣는다
즉 모든 Html의 <head> 태그 부분에 복사 붙여넣는다는 뜻
...
<!-- web font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<!-- my css -->
<link rel="stylesheet" href="/css/master.css">
</head><head> 태그 안에 넣으면 된다
4. 그리고 css 파일로 가서 (위의 경우는 css/master.css)
body {
font-family: 'Noto Sans', sans-serif;
}font-family : 'Noto Sans', sans-serif;
자기가 가져온 폰트의 이름을 쓰면 된다.
그러면 body 태그에 폰트 적용하게 됨
B. ttf / otf 형식 파일을 다운로드한 경우
1. 만약 다른 웹사이트나 구글 폰트에서 다운로드하는 경우가 있다면 woff로 바꿔서 직접 파일을 쓸 수 있다
2. 하지만 이렇게 ttf 파일이 나오거나
otf 형식 파일이 나온다면 변환을 해줘야 한다.
https://convertio.co/kr/ttf-woff/
TTF WOFF 변환 (온라인 무료) — Convertio
ttf 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.
convertio.co
3. 여기 무료 변환 사이트로 가서 ttf->woff 아니면 otf->woff 형식을 바꾼다
WOFF 파일은 WOFF (Web Open Font Format) 형식으로 작성된 웹 글꼴 파일로, 즉시 웹 페이지 글꼴을 전달하는 데 사용되는 공개 형식. 따라서 woff로 사용해야 바로 적용 가능하다
4. 그렇게 변환한 결과를 프로젝트 root 경로에 fonts 폴더를 만들어 넣는다
그러면 경로가 ./fonts/RIDIBatang.woff
가 되는데
@font-face {
font-family : 'RIDIBatang';
src: url('./fonts/RIDIBatang.woff') format('woff');
}5. 이렇게 css에 쓰면 끝~!
경로가 다르더라도 경로를 정확히 지정하면 문제 없다
@font-face에 쓰면 바로 적용됨 :)
이유 :
@font-face 지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다. 이 명령어의 동작 방식은 뒤에서 살펴봅니다.
출처: https://webclub.tistory.com/261 [Web Club]
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 마무리 (0) | 2021.07.14 |
|---|---|
| 생활코딩 css 코드의 재사용 - .css 파일을 만들자 (0) | 2021.07.14 |
| 생활코딩 css 반응형 디자인과 미디어 쿼리 소개 (0) | 2021.07.14 |
| 생활코딩 css 그리드2 그리드 써먹기 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델2 줄긋기 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css 선택자를 스스로 알아내는 방법 (0) | 2021.07.12 |