[CSS폰트]Google font 사용하기

2021. 1. 4. 22:04·개발/ETC
728x90

티스토리 기본 폰트가 너무 맘에 안들어서 구글링 하다가 발견!

 

하지만, 기본적인 html/css구조를 알아야 사용할 수 있을것같습니다.


 

구글 폰트 기본주소이고,

 

fonts.google.com/

 

Google Fonts

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

fonts.google.com

fonts.google.com/?subset=korean

한국으로 설정했을때, 주소입니다.

 

Google Fonts

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

fonts.google.com

한국으로 설정했을때 화면 입니다

 

korean으로 설정화면

원하는 폰트를 선택 후 ,  [+Select this style]을 선택하면 됩니다.

 

 

+ Select this style 선택

+Select this style 선택하고나서 이제 본인의 css사용 용도에 따른 link / @import  선택하면 됩니다.

티스토리를 꾸민다면 @import  선택하시면 됩니다.

 

link / @import  선택

 

@import <style>
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap');
</style>
CSS font-family: 'Sunflower', sans-serif;


@import 부분만 필요하며. 그외 <style>는 필요하지 않습니다.

티스토리 스킨편집에서 CSS를 선택하고

 

제일 상단에 @import 부분을 넣습니다. 

@import붙여넣기

그 다음 

body,th,td,input,select,textarea,button { 의  font-family 부분에 CSS를 넣습니다.

[font-family] 부분을 찾아서 CSS를 넣어도 됩니다~

 

[font-family] 부분에 붙여넣기

그러며 본인의 티스토리에 폰트가 적용됩니다.

 

처음엔 어렵지만, 계속 바꿔가면서 적용시키다보면 금방 적응됩니다

 

역시 갓 구글~

 

728x90

'개발 > ETC' 카테고리의 다른 글

[Windows10] 사용자 계정 제한(예: 사용 시간 제한) 때문에 로그인할 수 없습니다. 오류 해결방법  (0) 2022.05.27
[CUDA]yolov5 실행하기위한 노트북 환경구성(CUDA)  (0) 2022.05.26
[PowerMockup] 파워목업 정식버전 라이센스 등록  (0) 2021.08.07
[파워포인트] Power Mockup(파워목업), 화면 설계 툴 소개  (0) 2021.08.05
Hello world!  (0) 2020.01.09
'개발/ETC' 카테고리의 다른 글
  • [CUDA]yolov5 실행하기위한 노트북 환경구성(CUDA)
  • [PowerMockup] 파워목업 정식버전 라이센스 등록
  • [파워포인트] Power Mockup(파워목업), 화면 설계 툴 소개
  • Hello world!
호이호이209
호이호이209
이것저것 기록하는 메모장
    250x250
  • 호이호이209
    R=VD
    호이호이209
    • R=VD전체글 (83)
      • 개발 (63)
        • Linux (19)
        • 머신러닝 (10)
        • Git (6)
        • Python (9)
        • 프로그래밍 언어 (2)
        • Docker (5)
        • ETC (12)
      • 일상기록 (20)
        • 여행 (5)
        • 일상-이모저모 (8)
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
호이호이209
[CSS폰트]Google font 사용하기
상단으로

티스토리툴바