티스토리 블로그는 html/css/js로 얼마든지 커스텀 할 수 있기 때문에 폰트도 수정 가능해요
오늘은 구글 폰트에서 제공하는 무료 폰트를 이용해서 코드블럭의 글씨체를 바꿔보겠습니다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
저는 Montserrat 체가 마음에 들어서 이걸로 골랐어요 ㅎㅎㅎ
원하는 폰트 정했으면 화면 상단 Get Font 클릭해주세요.
그러면 1 font family selected 화면으로 넘어오는데요
<> Get embed code를 클릭해주세요
web용 <link> 선택 해 주고 Copycode해서 코드를 복사 해 옵니다.
그리고 블로그 스킨 편집 > html 편집 으로 가 주세요.
<head>태그 안에 복사해온 태그를 붙여넣기 해 주세요.
저는 link태그 아래 붙여주었습니다.
그 다음 CSS 편집으로 가셔서 기본 폰트 설정을 변경 해 줄건데요
heLLO 스킨을 쓰고 있는 저는 D2Coding 이 기본 폰트로 설정 되어 있어요
그래서 D2Coding을 검색 해서 pre 블럭으로 가 줍니다
D2Coding 앞에 내가 추가한 폰트의 이름을 입력 해 주세요~
저는 Montserrat 이라고 입력 해 주었습니다.
이렇게 폰트 적용이 됐어요 ㅎㅎㅎ
개인적인 생각이지만 기본 폰트가 가독성도 좋구, 이쁜 것 같아요~
💙ChatGPT가 추천하는 코드블럭용 폰트 5가지💙
코드블록에 적합한 폰트를 찾을 때는 가독성과 **일관된 폭(모노스페이스)**이 중요해요.
아래는 chatGPT가 추천해준 무료 구글 폰트 5가지예요 ㅎㅎㅎ
1. Fira Code
Fira Code - Google Fonts
Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or := are single logical tokens, even if the
fonts.google.com
2. Source Code Pro
Source Code Pro - Google Fonts
Source Code was designed by Paul D. Hunt as a companion to Source Sans.This complementary family was adapted from the Source design due to a request to create a
fonts.google.com
3. JetBrains Mono
JetBrains Mono - Google Fonts
JetBrains Mono is a typeface made for the specific needs of developers. Find more informations about font features, design and language support on www.jetbrains
fonts.google.com
4. Roboto Mono
Roboto Mono - Google Fonts
Roboto Mono is a monospaced addition to the Roboto type family. Like the other members of the Roboto family, the fonts are optimized for readability on screens
fonts.google.com
5. Ubuntu Mono
Ubuntu Mono - Google Fonts
The Ubuntu Font Family are a set of matching new libre/open fonts in development during 2010-2011. The development is being funded by Canonical Ltd on behalf th
fonts.google.com
'BlogCustom' 카테고리의 다른 글
| [블로그 커스텀] 티스토리 코드블럭 커스텀하기 (Feat. highlight.js) (18) | 2024.11.10 |
|---|---|
| [블로그 커스텀] 티스토리 hELLo 스킨 본문 너비(폭) 늘이기 (12) | 2024.11.09 |
| [블로그 커스텀] 티스토리 코드블럭에 인라인 넘버 적용하기 (css, js 코드) (5) | 2024.11.09 |
| [블로스 커스텀] 티스토리 hello 스킨 이미지 본문 폭 안에 맞추는 방법 (4) | 2024.11.09 |
| [블로그 커스텀] 티스토리 블로그 다크모드 자동선택 해제하는 방법 (5) | 2024.10.31 |
티스토리 블로그는 html/css/js로 얼마든지 커스텀 할 수 있기 때문에 폰트도 수정 가능해요
오늘은 구글 폰트에서 제공하는 무료 폰트를 이용해서 코드블럭의 글씨체를 바꿔보겠습니다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
저는 Montserrat 체가 마음에 들어서 이걸로 골랐어요 ㅎㅎㅎ
원하는 폰트 정했으면 화면 상단 Get Font 클릭해주세요.
그러면 1 font family selected 화면으로 넘어오는데요
<> Get embed code를 클릭해주세요
web용 <link> 선택 해 주고 Copycode해서 코드를 복사 해 옵니다.
그리고 블로그 스킨 편집 > html 편집 으로 가 주세요.
<head>태그 안에 복사해온 태그를 붙여넣기 해 주세요.
저는 link태그 아래 붙여주었습니다.
그 다음 CSS 편집으로 가셔서 기본 폰트 설정을 변경 해 줄건데요
heLLO 스킨을 쓰고 있는 저는 D2Coding 이 기본 폰트로 설정 되어 있어요
그래서 D2Coding을 검색 해서 pre 블럭으로 가 줍니다
D2Coding 앞에 내가 추가한 폰트의 이름을 입력 해 주세요~
저는 Montserrat 이라고 입력 해 주었습니다.
이렇게 폰트 적용이 됐어요 ㅎㅎㅎ
개인적인 생각이지만 기본 폰트가 가독성도 좋구, 이쁜 것 같아요~
💙ChatGPT가 추천하는 코드블럭용 폰트 5가지💙
코드블록에 적합한 폰트를 찾을 때는 가독성과 **일관된 폭(모노스페이스)**이 중요해요.
아래는 chatGPT가 추천해준 무료 구글 폰트 5가지예요 ㅎㅎㅎ
1. Fira Code
Fira Code - Google Fonts
Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or := are single logical tokens, even if the
fonts.google.com
2. Source Code Pro
Source Code Pro - Google Fonts
Source Code was designed by Paul D. Hunt as a companion to Source Sans.This complementary family was adapted from the Source design due to a request to create a
fonts.google.com
3. JetBrains Mono
JetBrains Mono - Google Fonts
JetBrains Mono is a typeface made for the specific needs of developers. Find more informations about font features, design and language support on www.jetbrains
fonts.google.com
4. Roboto Mono
Roboto Mono - Google Fonts
Roboto Mono is a monospaced addition to the Roboto type family. Like the other members of the Roboto family, the fonts are optimized for readability on screens
fonts.google.com
5. Ubuntu Mono
Ubuntu Mono - Google Fonts
The Ubuntu Font Family are a set of matching new libre/open fonts in development during 2010-2011. The development is being funded by Canonical Ltd on behalf th
fonts.google.com
'BlogCustom' 카테고리의 다른 글
| [블로그 커스텀] 티스토리 코드블럭 커스텀하기 (Feat. highlight.js) (18) | 2024.11.10 |
|---|---|
| [블로그 커스텀] 티스토리 hELLo 스킨 본문 너비(폭) 늘이기 (12) | 2024.11.09 |
| [블로그 커스텀] 티스토리 코드블럭에 인라인 넘버 적용하기 (css, js 코드) (5) | 2024.11.09 |
| [블로스 커스텀] 티스토리 hello 스킨 이미지 본문 폭 안에 맞추는 방법 (4) | 2024.11.09 |
| [블로그 커스텀] 티스토리 블로그 다크모드 자동선택 해제하는 방법 (5) | 2024.10.31 |
