웹 폰트

웹 폰트를 사용하는게 생각이 안나서 다시 찾아보면서 정리한 글 입니다. 사람은 망각의 동물이라더니 ㅇㅅㅇ

를 참고해서 쓴 글입니다.

웹폰트를 사용하는 이유는 사용자의 컴퓨터 마다 깔려있는 폰트가 다르기 때문인데

이를 해결하기 위한 3가지 경우의 수가 있다. 구글이나 네이버 같은 사이트에서 제공하는 웹 폰트를 사용하는 경우, 그리고 그런게 싫다!!! 나는 내 컴퓨터에 있는 폰트를 쓸꺼야!! 하는 경우 그리고 이미 만들어진 웹폰트를 url형식으로 가져다 쓰는 경우

일단 구글 폰트를 사용하는 방법을 알아보자

구글 폰트를 웹 폰트로 사용하는 방법

여기에 들어가서 내가 쓰고 싶은 폰트를 선택한다. 나는 3개를 선택했다.

( 선택은 + 빨간색 버튼을 누르면 된다)

밑에 3families selected라는 말이 뜬다 그것을 눌러보면

첫번째 회색 박스에 있는 코드와 두번째 회색 박스에 있는 코드가 보인다.

첫번째 링크 코드는 html파일에 head부분에 넣어준다.

그리고 내가 선택한 폰트를 쓰고 싶다면 CSS style테그로 두번째 회색 박스를 참고하여 사용하면 된다.

html코드에 내가

이렇게 썼다면

css 파일이나 html style 에

 .font { 

       font-family: 'Quicksand', sans-serif;
}

이렇게 쉬운 방법이 있지만

내가 디자인 상의 이유로 특정한 폰트를 사용하고 싶어 할 수도 있다. 그럴 경우에는 어떻게 해야 할까?

내가 사용하고 싶어하는 폰트의 파일이 있을 것이다. (폰트 파일은 대부분 .ttf, .otf로 끝난다)

web-font-generator라는 사이트에 들어가서 내 컴퓨터 안에 있는 폰트 파일을 업로드 한다.

사이트는 이렇게 생겼다

I'm uploading a font that is legal for web embedding. I checked with the author and/or EULA.

라는 체크박스를 클릭해준다. 내가 사용하는 폰트 파일이 사용을 해도 저작권상의 문제가 없다라는 것을 확인했다는 말이다.

download package라는 연두색 버튼이 활성화된다. 그것을 클릭하면 웹 폰트를 만들어준다.

다운을 받고 그것을 내가 사용하는 워크스페이스에 업로드를 하면 .eot, .oft, .ttf....하여튼 파일이 많이 생성 되어 있는 것이 보인다. 해당 브라우저마다 지원하는 파일 형식이 각자 다르기 때문에 파일 형식을 다양하게 지원을 하는 것이다.

샘플 파일이 같이 업로드가 될 텐데

/* @font-face {

          font-family: ... ;

                   .

                   .

                   .

} */

이렇게 나옴 여기서의 ...은 사용자가 지정을 할 수 있고

스타일을 지정할 때 그것을 사용하면 된다라는 말이다.

body{font-family: ... ;}

이런 방식으로

~~웹 폰트를 직접 생성해서 하는 방법을 시도하려 했으나 왜 때문인지 we-font-generator라는 사이트가 자꾸 멈추네... ㅜㅠ 다음에 한번 더 해봐야겠다.~~

더 쉽게 디자인된 서체를 사용하고 싶다면?

https://noonnu.cc/

여기로 들어가서

원하는 폰트를 선택하고 웹 폰트 코드를 긁어서 입력하자

참고로 이 서비스도 국민대학교 멋쟁이 사자처럼에서 만든거다.

서비스를 만든분도 동기였는데 아이디어 나왔을때 필요하다고 생각하고 좋은 서비스다...라고 느꼈는데

엄청 잘나가고 계신다. 부럽당