배달의 민족 폰트 css 적용법

(배달의 민족뿐 아니라 다른 폰트들도 이런 식으로 적용해 주면 됩니다. 원리는 똑같음)

(영상 참고)

> 핵심은 "배달의 민족 폰트"를 검색하고, 이후 사이트에 가서 TTF를 다운(윈도우 용이라고 생각하면 편함.) - (맥이면 OTF를 다운로드하면 됨)

이후 얻은 파일을 적용하고 싶은 파일로 이동시켜주면 됨.

(나의 경우, 아예 외부 폴더로 "font"를 만들고 거기에 넣어 두었다. 이러면 관리가 굉장히 쉽고, 추가하기도 좋다.)

보면 비주얼 스튜디오 코드라는 "메인 폴더" 밑에 font라는 폴더를 만들었다. 그리고 다운로드를 받은 BMJUA_ttf.ttf을 font 폴더 안에 넣어주었다.

이후 @font-face 구문을 사용해 주고, src에 url을 넣어주었다. url에는 ../font/~~가 들어갈 것이다.

당연히 폴더 이름도 본인마음이라서 어떻게 짓든 상관없다. 다만, "../"은 꼭 집어넣어야 한다. 안 그러면 작동이 안 된다. (이건 프론트 엔드에서 파일이나 폴더 가져올 때 많이 쓰이니깐 무슨 말인지 알 것임. ㅇㅇ)

어쨌든, 이후 다운 받은 배민 파일도 넣어주면 준비는 끝난다.

이후 font-family에 원하는 이름을 넣어준다. 이름은 아무거나 상관없지만, 배민 폰트 파일명과 동일하게 가주면 좋을 거 같다. (배민 폰트 파일을 여러 개 쓸 수 있는데, 구별을 해주기 위함이다.)

자세한 것은 영상을 참고하자.

관련글