구글폰트 포토샵 및 HTML에 적용하는 방법

  

 포토샵이나 여타 디자인 프로그램을 사용하던 중 원하는 글씨체가 없으면 꽤나 답답할 것이다. 다행히도 구글에서 무료로 폰트를 다운받을 수 있기 때문에 그 방법을 소개해 보고자 한다.

 

 

 구글폰트 사이트에서는 수많은 영문폰트를 지원하고 있어서 대부분 자신이 원하는 폰트를 찾을 수 있을 것이다.  

 

 

 

 

 

 사이트 찾는 방법은 간단하다. 구글이나 네이버 검색창에서 한글이나 영어로 '구글폰트' 라고 입력하면 나오는 Google Fonts 사이트로 들어가면 된다.

 

 

 단, 익스플로러에서는 접근이 불가능하니 이점 참고하자. 메시지에 보듯이 크롬, 파이어폭스, 에지, 사파리에서 방문이 가능하다고 되어있다. 필자는 크롬을 이용하였다.

 

 

 구글폰트 사이트의 메인화면인데, 각종 폰트가 등록되어 있는 모습이다. Search에서 찾고자 하는 폰트명을 입력하자. 빨간색 박스 안의 폰트 굵기나 스타일 항목을 체크하여, 좀 더 세부적인 사항으로 폰트를 찾을 수 있다.

 

 

 폰트 이미지 위에 마우스를 갖다대면 'SEE SPECIMEN' 이라고 뜨는데 클릭하면

 

 

 원하는 단어를 입력하여 폰트 샘플을 미리 볼 수가 있다. 이 기능으로 폰트의 필요 유무를 판단하면 되겠다.

 

 

 

 필요한 폰트를 선택했다면 이제 자신의 컴퓨터에 그 폰트를 다운로드하여 설치해보자. 폰트 이미지위에 보면 십자가 표시가 있는데, 이 부분으로 폰트를 담을 수 있다.

 

 

 화면 아래의 ( - ) 부분을 누르면 등장하는 창에서 다운로드가 가능하다.

 

 

 압축파일 모양에 마우스 우클릭을 하여 저장폴더를 확인하자.

 

 

 

 압축을 풀면 위와 같이 저장된 TTF 파일이 있을 것이다. 원하는 글꼴을 찾아서 더블클릭 해보자.

 

 

 

 마지막으로 설치 버튼을 누르면 설치가 완료된다. 이제 포토샵에서 확인하는 일만 남았다.

 

 

 포토샵에 방금 설치한 Roboto 폰트가 있는 모습. 음~ 잘 설치가 되었군 ㅋㅋ

 

 

 

 HTML/CSS에 적용을 하려면 빨간색 박스 부분을 긁어서 HTML과 CSS에 각각 붙여넣기를 하면 된다.

 

 

 HTML의 헤드 사이에 붙여넣기하고 CSS에서 폰트와 글꼴 선언 해주면 해당폰트가 적용이 된다. 코딩하는 사람이 이 기초부분을 모를 리는 없으니, 설명은 여기까지 하고 이번 포스팅은 여기서 끝~