1976s

0️⃣ Fira Code 폰트 소개?

=> 기호를 ⇒ 로 보이틑 폰트입니다. 그냥 D2Coding 사용했지만 이 폰트가 간지 나서 변경했습니다.

다른 코딩용 폰트로 Cascadia Code, https://www.slant.co/topics/67/~best-programming-fonts 가 들 수 있습니다. 여기에 Fira Code 폰트가 있습니다.

더 직관적이라서 좋더군요.

 

1️⃣ Fira font 파일 다운로드

https://github.com/tonsky/FiraCode

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

https://fonts.google.com/specimen/Fira+Code 

Fira Code - Google Fonts

다운로드 > zip 파일 압축 해제 > 파일 선택 > ttc 선택하여 글꼴 설치를 완료.

 

2️⃣ VSCode 적용

폰트 설치 후 VSCode를 실행합니다.

F1 누른 후 settings.json 입력

기본설정: 사용자 설정 열기(JSON)를 클릭

"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,
"editor.fontLigatures": "'cv14', 'cv31', 'ss02', 'ss08', 'cv26', 'cv32', 'ss06', 'cv28', 'ss09', 'ss03'",

위의 코드를 추가(변경)합니다.

입력한 후 VSCode 재실행

 

테스트

3️⃣ Sublime Text 적용

프로그램 실행 후 메뉴에 Preferences > Settings 에 들어갑니다.

"font_face": "Fira Code",
"font_options":
[
"cv14", "cv31", "ss02", "ss08", "cv26", "cv32", "ss06", "cv28", "ss09", "ss03"
],

위의 코드를 추가(변경) 후 저장을 합니다.

테스트

 

4️⃣ Tistory 적용

Tistory 관리자페이지로 가서 스킨편집을 눌러 새로운 창이 나오면 html편집을 눌러 편집모드로 들어갑니다.

상단에 CSS를 눌러 코드를 수정합니다.

@import url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/fira_code.css");

코드 페이지 상단에 @import을 사용 폰트를 불러오고

code.hljs {
  font-family: 'Fira Code', 'SUIT', monospace;
  text-rendering: optimizeLegibility;
  font-weight: 300;
  font-feature-settings: "cv14", "cv31", "ss02", "ss08", "cv26", "cv32", "ss06", "cv28", "ss09", "ss03"
}

페이지 하단에 위 코드를 추가합니다.

※ 저의 경우 .hljs의 배경이 검정 개열이라 font-weight: 300으로 했습니다. 400이상이면 굵게 표시 됩니다. 이때 다크모드에서는 굵은 것이 더 잘보입니다.

적용을 눌러 소스를 적용합니다.

 

참고로,
style 부분에는 code.hljs 소스는 본 테마마다 다를 수 있으니 클래스를 잘 찾아서 입력합니다.

테스트

M+ 1m
0 o O l 1 L I i ! S s C c V v P p
, . "" '' ` : ; | \/ [] () {} * - + <>
-> <-- == === != !== >= <= .= \\ =~
<< >> <== ==> += *= := {. .}

아쉽게도 Tistory에서는 몇몇 개는 작동이 되지 않은 것 같습니다. 아직 발견하지 못한 것일 수 있지만 나름 저의경우 이것이 더 좋다고 봅니다. (설명용으로는 더 좋네요  o(*￣▽￣*)ブ )

✳️ 다른 프로그램은 여기에

https://github.com/tonsky/FiraCode/wiki

Home

 

5️⃣ 마치며

'Fira Code폰트'를 알게 되어 빠르게 페이지 만들다 보니 두서가 없습니다. 양해 부탁드립니다.