WEB/HTML+CSS(Front-end)

HTML+CSS - 웹페이지 폰트 적용하기

얄루몬 2021. 5. 17. 22:32

 

웹-폰트란? 
다른 사용자의 컴퓨터에 웹디자이너가 사용한 글꼴이 없어도 보여지도록 구현 한 것을 의미한다.

 



<웹폰트 사용법>

[ 1. 웹 폰트 사용하기 ]

https://fonts.google.com/earlyaccess

 

Google Fonts

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

fonts.google.com

구글에서 제공하는 웹 폰트를 사용하는 방법이 있다.

https://m.blog.naver.com/onsway/221547112192

 

[HTML] 웹 폰트 사용하기

웹 폰트(web-font) 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자...

blog.naver.com

친절하게 사용방법을 알려주고 계심.

웹 폰트 사용 시 화면

 


[2. 직접 폰트를 내 컴퓨터에 다운로드 받아서 웹페이지에 적용시키는 방법.]

https://fonts.google.com/?subset=korean

 

Google Fonts

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

fonts.google.com

한국의 폰트만 모아져 있는 카테고리를 긁어왔다.

다운로드를 해서 진행하는 방법으로 위의 블로그에서 이 역시 친절하게 설명을 해주시고 계신다. 


웹폰트는 사이트 방문시에 자동으로 폰트를 다운로드 시켜주어 사용자가 디자이너가 쓴 폰트 디자인을 그대로 볼 수 있도록 고안 한 것이다. 

 

웹폰트는 뭐 잘 쓰이지 않는 추세라고는 하는데.. 처음 시작하는만큼 한 번 쓰고 시작하는 것. 


https://velog.io/@jehjong/CSS%EC%97%90-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%ED%8F%B0%ED%8A%B8-%ED%8C%8C%EC%9D%BC

 

CSS에 폰트 적용하기 (웹폰트 & 폰트 파일)

눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용한다적용적용파일을 다운받은 후 프로젝트 디렉토리에 복사한다url 자리에 해당 폰트 파일의 경로 기입font-family이름은 원하는대로 지정적용

velog.io