html 홈페이지 폰트를 함 바꿔보자. with 구글폰트

폰트는 굳이 화려 할 필요가 없다. 의미 전달만 하면 되니. 그래도 가끔은 기분 전환 할 겸 폰트를 바꿔 주는 것도 나쁘지는 않다. 현재 페이지 상단을 보면 제목 폰트, 그 中 숫자와 알파벳 기타 기호의 모양이 바뀐 것을 알 수 있는데 바꾸면 그런 느낌이다.

본디 오로치마루 옆에 있는 버튼 글자를 바꿀 생각이였지만 가독성도 무척 낮아졌고 더군다나 모바일에서는 지원이 안 된다는 큰 한계점으로 인해 일단 나두기로 했다.

바꾸는 방법은 여러 가지가 있으나 구글 폰트를 기본으로 2가지만 설명하도록 하겠다.

2가지 방법 다 간단하다. 구글폰트로부터 코드를 따 온 다음 붙이고자 하는 페이지에 어느정도 틀만 잡은 다음 붙여넣기하면 끝난다.

첫째, css를 따로 만들지 않고 html 안에서 해결하기.

<head>

<style>

h1.a {

font-family: 'Srisakdi', cursive;

font-size: 15px;

font-weight : ;

}

</style>

</head>

<body>

</body>

head 태그 안에 따온 링크를 집어 넣고 스타일 태그를 만든 뒤 폰트 페밀리를 복사 붙여 넣기 한 뒤 바디나 기타 폰트를 사용하고 싶은 곳에서 class로 스타일에서 지정한 이름을 넣어 사용하면 된다. 다만, 여기서 한가지 집고 넘어가야하는 것이 스타일에 사용 된 h1.a 명이다. h1은 기존에 있는 태그명으로 만약 기존에 있는 태그명이 아닌

그저 쓰고 싶은 이름으로 쓰고 싶은 곳에 클레스 명을 넣어 사용하고 싶다면, ‘h1.’이 아닌

그저 ‘.a’로 시작하면 된다. 다음 예제에서 그렇게 써 보도록 하겠다.

둘째, css에 넣어 사용하기

티스토리를 사용하면 css라는 공간이 따로 있는 것을 발견 할 수 있다.

그곳에(css)

@import url('https://fonts.googleapis.com/css?family=Srisakdi');

.a {

font-family: 'Srisakdi', cursive;

font-size: 15px;

font-weight : ;

}

이렇게 넣은 다음 html에

이렇게 사용하면 된다.

아까부터 뭘 복사 해서 와라고 하는데, 도대체 뭘...

우선 구글폰트에 들어가라.

https://fonts.google.com/

글자체가 여러개 나오는데 그 中 마음에 드는 글자체를 선택(오른쪽 상단에 ‘+’)하면 밑에 검은 바가 생기는디 그걸 누르면 위의 그림처럼 여러 가지 내용이 나온다. 자세히 보면 코드들이 보이는데 그 것을 복사 해서 해당 코드에 집어 넣으면 된다.

우선 붉은 글씨로 standard는 첫 번째 방법에 쓰일 것이고, @import는 두 번째 방법에 쓰인다.

(모르겠으면 예제 다시 보삼)

(설마 두 번째 방법 복사하면서 <style>까지 끌어다 쓰는 사람은 없겠죠? 예제 다시 봐요.)

font-family를 해석 해 보자면,

폰트페밀리를 해석 해 보자면, 우선 ‘’안에 있는 Srisakdi를 먼저 써 보고 없으면, 기본으로 제공 해 주는 글자체 cursive을 사용하라는 뜻이다.(font-family: 'Srisakdi', cursive;)

다르게 설명하자면,

font-family: 'a', ‘b’, ‘c’, cursive;

a글씨체 없어? 그럼 b써, b도 없어? 그럼 c써, c도 없다구? 그럼 cursive는... 있겠지? 이런 뜻이다.

아까부터 font-size. font-weight를 넣어주는 이유는,

넣어주는 것이 바람직하기 때문이다. 글자체를 끌어다 쓰게 되면 이상 할 만큼 주변과 어울리지 않는 크기, 진한 정도로 결과물이 발생하게 되는데 이 두가지가 그 것을 수정 해 주기 때문이다. size는 다들 이해 할 것이고 weight는 글자 진함 정도로 만약 이를 지정하지 않으면 흐릿한 글자와 마주하게 되는데, font-weight에 bold나 그냥 숫자를 집어넣어도 수정 되니