상세 컨텐츠

본문 제목

폰트 찾기와 폰트 적용 하기

블로그운영팁/Code & Tool

by 리뷰덕후감 2022. 2. 28. 15:00

본문

반응형

 블로그 개편을 하느라 정신없습니다. 마무리 하기까지 시간이 많이 필요할 것 같아요. 블로그 리뉴얼한 내용을 차근차근 기록해 보려고 합니다.

 

블로그에 폰트 적용하는 방법은

폰트 다운로드하기> CSS 코드 복사> html 코드 복사

 

순서로 진행하면 됩니다. 구글의 Noto Sans Korean 폰트를 예로 설명하는데 아래 이미지와 같은 스타일이니 참고하세요.

 

Noto Sans Korean 48x400과 21x400 비교

 

폰트 적용하기

• 티블로그 관리 홈에서 스킨 편집> html 편집 상태에서 진행합니다.

 

원하는 폰트를 다운로드하여서 파일 업로드에 추가합니다.

 파란색으로 표시된 부분을 CSS에서 검색하여 주황색 부분을 교체해 줍니다. 웹에서 폰트를 사용할 때는 CSS에 패밀리를 지정하는 규칙을 꼭 지켜줘야 합니다. 보통 다운로드하신 폰트에 함께 표기됩니다.

     font-family: 'Nanum Gothic', sans-serif;

새로운 글꼴을 사용하려면 <head> 안에 html의 코드를 복사해야 합니다. 찾기 쉽도록 <head>의 가장 아래 추가하면 좋습니다. 보통 다운로드하신 폰트에 함께 표기됩니다.

  <style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
</style>

 

무료 폰트 모음

구글 폰트를 대표적으로 많이 사용하고 있습니다. 언어 지원도 되고 구글 검색으로 자주 보는 폰트라 가장 편안해요. 어도비 폰트는 한글이 몇 개 없습니다. 한글 폰트는 공유마당, 공공누리, 눈누가 제일 많은데 겹치는 폰트도 많습니다. 네이버 폰트는 손글씨 종류가 많고 카페 24도 익숙한 폰트가 꽤 있어요.

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

Adobe Fonts

Adobe Fonts partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day. No need to worry about licensing, and you can use fonts from Adobe Fonts on the web or in desktop applications.

fonts.adobe.com

 

네이버 글꼴 모음

네이버가 만든 150여종의 글꼴을 한번에 만나보세요

hangeul.naver.com

 

카페24 상업용 무료 폰트 다운로드 - 카페24

라이선스 걱정 없이 어디서나 사용할 수 있는 상업용 무료 폰트

fonts.cafe24.com

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

무료폰트(목록) | 공유 마당

 

gongu.copyright.or.kr

 

글꼴 | 추천 공공저작물 | 공공누리

 

www.kogl.or.kr

 

설치 프로그램

폰트 전용 프로그램도 있습니다. 폰트통, 산돌구름 등 무료 폰트도 제공하고 있습니다만 설치가 꺼려지신다면 웹에서 다운로드하는 방법을 추천합니다.

 

폰트어썸

무료로 아이콘을 지원하는 사이트인데 꽤 인기가 많습니다. 폰트를 글씨로만 생각했는데 웹에서는 아이콘도 많이 사용하고 있죠.

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

 

공감 댓글 공유는 언제나 환영합니다.

반응형

댓글 영역