목차
Opening (전체보기)
글꼴 적용 전, 안내사항
1. 스킨마다 html이나 css의 방식이 다를 수 있습니다.
2. 스킨에 따라 블로그 이름이나, 일부분의 폰트는 바뀌지 않을 수도 있습니다.
그럴경우, font-family 를 일일히 찾아 바꿔주어야 할 수도 있습니다.
3. 해당 글은 '구글폰트' 를 이용한 적용방식으로써 다른 폰트의 적용방식은 가능하다면
차후에 올리도록 하겠습니다.
폰트꾸미기! 폰트 설정하기!! 아주 쉽고 간단하게 알려드릴게요!! 진짜 간단할거에요!
(제 스킨은 'Square' 입니다)
구글폰트이용하기
인터넷에 구글폰트를 검색하여 들어가주세요!
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
혹시 귀찮거나 헷갈리시는 분들을 위해 본문에 링크 삽입해둘게요!
들어가시면 왼쪽 옆에 글꼴 검색하는 부분이 있을거에요!
언어 부분을 클릭하고 'ko' 라고 입력해주시면, '한국인' 이라고 뜹니다! (혹은 korean)
이어서 한국인(korean) 눌러주시면 한국어폰트가 쭉 나옵니다!
원하시는 폰트를 골라주세요!
저는 'orbit' 폰트로 선택했어요!
선택하신 폰트를 한번 눌러주세요!
오른쪽 상단(위에) '글꼴 가져오기' 라는 버튼이 보이실거에요! 눌러주세요!
이번엔, 오른쪽 상단에 '<> 임베드 코드 받기' 눌러서 들어가주세요~
여기서부터 중요한 겁니다! 잘 따라와주세요!
본격적으로 폰트 적용하기, HTML 적용하기
처음 보시는 분들께는 다소 복잡해보이실 수 있는데 생각보다 정말 간단합니다!
들어오자마자 보이는 링크!
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbit&display=swap" rel="stylesheet">
이 링크를 '코드 복사' 해주시고!
구글 폰트 홈페이지 닫지 마시고, 자신의 블로그로 와주세요!
[블로그 관리] - [꾸미기] - [스킨편집] 눌러주시고!
html 편집을 눌러주세요!
들어오셔서 위에서 복사한 링크를 </head> 위에 붙여넣기 해주세요!
(편집 들어오시면 그 근처에 있으니 바로 찾으실 수 있을거에요!)
<head>
.
.
.
.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbit&display=swap" rel="stylesheet">
</head>
저처럼 <link rel.....> 이 있다면, 그 밑에 넣어주셔도 됩니다!
그리고 <적용> 눌러주세요!
글꼴 완전 적용시키기! 마무리
다 됐습니다!
다시 구글 폰트로 돌아와서! 우리가 지금 계속 복사해왔던 코드 밑에
'CSS클래스' 라고 있을거에요!
여기서는 딱 'font-family' 옆에 있는 "폰트이름" 만 복사해주시면 됩니다! (" " 제외, 딱 폰트이름만요!)
Orbit 복사하고! 블로그의 css로 돌아와줍니다! (홈페이지 닫으셔도 됩니당!
css에 넣어줬던 링크 밑에 잘보면 'body, input, textarea' 가 있을거에요!
그 밑에 font-family 보이시죠!?
거기에 적혀있는 폰트 지우시고 방금 우리가 복사해온 폰트이름을 넣어주세요!
body,
input,
textarea {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
/* 밑에처럼 바꿔주세요! */
body,
input,
textarea {
font-size: 14px;
font-family: Orbit;
그럼 블로그의 폰트가 바뀌어있을거에요!!!!
Closing
여기까지 잘 따라오셨나요?
힘들게 따라오신 분도 계실거고, 수월하게 따라오신 분도 계실텐데
모두 수고하셨어요!
이쁜 폰트로 티꾸! 티스토리가 잘 꾸며졌으면 좋겠어요!
오늘도 읽어주셔서 감사합니다!
글 양식 및 사진, 영상 등 모든 콘텐츠의 무단복제를 금지합니다.
copyright © 2024. kkoma. All rights reserved.
'핸드폰 설명서 > 티꾸(티스토리꾸미기)' 카테고리의 다른 글
| [티스토리] 블로그에서 많이 사용되는 <script> 태그! 스크립트 태그 알아보기! (1) | 2024.10.23 |
|---|---|
| [티스토리] css가 뭔가요? css에 대해서 알아보자! (0) | 2024.10.17 |
| [티스토리] 배너가 안보여요! 배너가 안나와요! 배너 출력 플러그인 등록하고 배너 등록하는 법 (6) | 2024.10.16 |
