카테고리 없음

Cursor에 Fira code 적용 후 반영 안되어 보이는 경우

쟌문 2025. 5. 25. 10:25
반응형

바로 결론부터 !

결론은 반영이 안된게 아니라 반영이 안된 것처럼 보였던 것 !

// settings.json
{
    "editor.fontLigatures": true
}

 

위 옵션이 있어야 ==> 또는 === 같은 기호를 사용했을 때 이쁘게 표현되는데,

위 옵션이 설정되어 있지 않아서 반영 안된 것 처럼 보였던 것 !!

 

그래서 

// settings.json
{ 
    "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true
}

 

fontFamily 적용과 함께 리가처 옵션도 함께 반영해 주어야 정상적으로 표현되어 보입니다.

⚠️ "editor.fontFamily"에서 적용해주려는 폰트가 다른 폰트보다 제일 앞에 배치되어 있어야 적용됩니다.
후위에 있을 경우 우선순위에 밀려서 적용되지 않아요.

 

 

폰트 적용 방법

Cursor 또는 VSCode의 Settings 캡쳐 화면 이미지

 

Cursor 또는 VScode의 Settings로 이동하려면 단축키 cmd + , 를 활용하거나  

(Cursor 기준) 최상단 툴바의 Cursor > Preferences > VS Code Settings

항목을 클릭하면 Settings로 접근할 수 있습니다.

 

Settings로 이동해 위 참고 이미지에 추가한 것 처럼 다른 기본 적용되어있는 폰트들 보다 제일 앞에 'Fira Code' 라고 적용해주면 정상적으로 반영됩니다.

 

✔️ 폰트를 적용해 주려면 우선 컴퓨터에 해당 폰트가 설치되어 있어야 합니다.

    -> 다양한 개발 관련 폰트: https://devfonts.gafi.dev/

    -> Fira Code 다운로드: https://fonts.google.com/specimen/Fira+Code

    에서 다운로드 가능합니다.

✔️ 여기서 주의할 점은 적용해주려는 폰트에 띄어쓰기가 있는 폰트명인 경우 따옴표를 붙여주어야 합니다.

    -> 단, 테스트해보니까 대소문자는 상관 없더라구요. fira code, Fira code 전부 상관 없어요.

✔️ 그리고 우선순위 원칙에 의해 다른 기본 폰트들보다 제일 앞에 추가해주어야 합니다.

 

 

마지막으로,

settings.json 파일로 접근 방법

settings.json 파일로 접근하려면 cmd + p를 눌러서 settings.json을 검색해서 파일로 이동하거나

settings.json 파일 위치 이동 가능한 버튼 화면 캡쳐 이미지

 

Settings에서 오른쪽 위쪽을 보면 위 빨간색 박스에 표시된 버튼이 있어요.

해당 버튼을 클릭하면 settings.json 파일로 접근할 수 있답니다.

 

접근해서 아래 옵션까지 깔끔하게 추가해주면

// settings.json
{
    ...
    "editor.fontLigatures": true
}

 

리가처 옵션 적용 후 화면 캡쳐 이미지

 

요런 이쁘장한 모양이 반영된답니다.

끝 !

반응형