글꼴 폰트 사이트 & 아이콘 폰트 사이트 추천 및 사용법
- IT/HTML + info
- 2022. 9. 18.
굴림, 돋움, 고딕 등등 이런 글씨체 말고 여러 다양한 폰트들을 직접 보고 사용하고 싶다거나, 상대방이 원하는 폰트로 적용을 해야 될 때 참고할만한 사이트 들을 소개합니다.
글꼴 폰트 사이트
아래 모든 사이트들은 모두 무료인 곳도 있고, 특정 폰트만 무료로 푼 곳이기 때문에 상업적으로 이용하실 경우 주의해서 사용하셔야 합니다. (이 글에서는 구글폰트를 추천하고 아래에 사용법을 적어놓겠습니다.)
1. 구글 폰트 (★추천)
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 어도비 폰트
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
3. TypeSquare
TypeSquare
문자를 통해 사회에 공헌하는 모리사와코리아의 클라우드 폰트 서비스입니다. 웹폰트, 데스크톱 폰트, 인쇄, 출판, 게임용 폰트, 소프트웨어 임베딩, 일본어서체, 한글 글꼴, 중국어 폰트, 다국
typesquare.com
4. DaFont
DaFont - Download fonts
www.dafont.com
5. 눈누
눈누
상업용 무료한글폰트 사이트
noonnu.cc
6. 공유마당
공유마당
공유마당
gongu.copyright.or.kr
7. 네이버 나눔 글꼴
네이버 한글한글 아름답게
6만여 명의 사용자와 만든 마루 부리 5종을 배포합니다.
hangeul.naver.com
8. 산돌 구름
산돌구름
다양한 언어와 폰트를 내가 원하는 대로! 한글, 영문, 중국어 등 19,000여종의 폰트로 더 완성도 높은 디자인을 경험해보세요.
www.sandollcloud.com:443
구글 폰트 사용법(예)
1.자신이 사용하고 싶은 글꼴 검색/클릭
2.”Styles” 항목을 찾을때까지 드래그해서 내린다.
3.원하는 글자 두께를 찾았으면 + 클릭 (기본 글자두께는 Regular 400 이다.)
4.오른쪽의 사이드바 메뉴에서 가져올 방법을 선택 ->> link 또는 @import 클릭
5. link 라면 html에다가 @import 라면 css에다가 복붙한다.
link로 사용할 경우 드래그 쳐진 부분에 css2?family=Noto+Sans+KR... 가 포함된 link만 복붙해도 문제가 없다.
(Noto+Sans+KR 폰트를 사용하는 예시입니다.)
@import 하는 경우에는 두 가지 경우로 나뉜다.
1.HTML파일로 @import 해오는 경우
<!-- HTML 파일로 @import 해오는 경우-->
<!-- style 태그로 묶은 후에 붙여 넣어야 한다. -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
</style>
2.css파일로 @import 하는 경우
/*css파일에서 import 해오는 경우*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
아이콘 폰트사용하기 = font-awesome
🌐 라던가 📰 와 같이 “페이스북”,”twitter”,”youtube” 등 sns 표시할 때 자주 아이콘을 사용하게 된다.
그럴 때 Free하게 쓸수 있는 사이트가 있다.
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
현재 최신버전은 6까지 나왔지만 유료로 사용해야하는 아이콘들이 많다.
아직 공부중인 사람들이라면 굳이 유료결제 하면서 사용하는건 아니라고 생각한다.
홈페이지에서 아래로 내려 [All version] 을 클릭하고 Font-awesome 4 즉, 버전 4짜리를 찾으면 무려 675개의 무료 아이콘을 사용할 수 있다.
사용 방법
1. HTML 에 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 를 붙여 넣어준다.
(font-awesome을 다운로드 하는 것도 한 방법이다.)
2. 주로 <i> 태그를 사용하지만 다른 태그를 사용해도 된다. 대신, class명 규칙이 있다.
3. 자신이 원하는 아이콘을 클릭하면 <i class="fa fa-address-book" aria-hidden="true"></i> 와 같이 쓰는 방법이 나와있으니 참고하기 바란다.
위의 방법이 맘에 들지 않는 경우
vscode를 사용한다면 cdnjs 확장프로그램을 받아서 font-awesome 을 검색해서 link로 다운 받고 버전만 4.7.0으로 바꿔주면 된다.
VScode 사용중이라면
- [F1] 클릭
- "cdnjs" 입력 후 search .. 클릭
- "fontawersome" 검색 후 클릭
- 버전 선택(버전이 하나만 나올 수 있음)
- fontawesome.min.css 로 끝나는 것 클릭
- (URL, LINK 상관없음) copy to clipboard 클릭
- HTML <head> 태그 안에 대입
8. 자신이 사용하고 싶은 버전 사용시 "6.2.0" 을 수정하면 된다. (추천은 4.7.0 !!)
cdnjs와 같이 유용한 확장 프로그램을 알고 싶다면?
VScode 기본 셋팅(1) - 확장프로그램 추천
※참고 !! 제가 편하게 사용하기 위해 깔아논 것 중 뽑아서 추천해드리는 것이기 때문에 절대적으로 깔아야 되는건 아님!! 맨 아래에 글에 쓰인 확장프로그램명 이름만 따로 정리해 놨습니다. 1
palkong.com
글이 도움 되셨다면 공감 한 번 부탁 드립니다 :)
'IT > HTML + info' 카테고리의 다른 글
| 코딩 시간을 줄여주는 에밋(emmet) (2) | 2022.09.29 |
|---|---|
| 반응형 웹 사이트 작성 법 & 디바이스별 규격 (0) | 2022.09.21 |
| FullSize 배경 이미지 & 이미지 용량 압축하는 방법 (2) | 2022.09.17 |
| 랜딩페이지(landing page) , 1단 레이아웃 (0) | 2022.09.15 |
| HTML 나쁜 습관, 나도 무의식적으로 쓰고 있다. (6) | 2022.08.17 |