# Visual Studio Code - Fix ZSH Font on Terminal

>This article in Bahasa, are you looking for English language? Google Translate is your friend, or simply click [here](https://blog-mhrdn-com.translate.goog/visual-studio-code-fix-zsh-font-on-terminal?_x_tr_sl=id&_x_tr_tl=en&_x_tr_hl=id).

Visual Studio Code atau yang akrab dipanggil [vscode](https://code.visualstudio.com/) adalah sebuah aplikasi *code editor* gratis dari Microsoft berbasis *desktop* dan daring. Aplikasi ini cukup populer dikalangan perekayasa perangkat lunak, karena gratis dan memiliki banyak fitur yang memudahkan penggunanya. Salah satu fitur yang sering saya gunakan pada aplikasi ini adalah *terminal*. Tidak ada yang salah dengan *terminal* pada vscode, semua berjalan normal jika anda belum melakukan kustomisasi pada terminal bawaan. Namun, karena saya sudah melakukan kustomisasi *font* yang digunakan, ada masalah estetika yang muncul seperti pada gambar di bawah ini.

![vscode-font-problem.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624252557446/7HxJoA_Iq.png)

Tentunya, masalah ini mengganggu mata saya ketika menggunakan *terminal* pada vscode. Sebagai catatan, saya menggunakan iTerm2 untuk aplikasi pengganti *terminal* bawaan. Awalnya iTerm2 memiliki masalah yang sama dan teratasi dengan mengganti konfigurasi *font*.

![item2-font-config.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624255394995/De0ILBxjQ.png)

Cara tersebut juga saya terapkan pada vscode, dan berhasil mengatasi masalah tampilan *font* yang mengganggu. Berikut langkah-langkahnya:

(1). Buka vscode, kemudian pilih menu **Code** - **Preferences** - **Settings**. *Jika anda menggunakan sistem operasi Microsoft Windows, anda bisa memilih menu **File** - **Preferences** - **Settings**.*

![vscode-preferences.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624255808946/IkanCMVkv.png)

(2). Selanjutnya pada kolom pencarian ketikkan *"terminal integrated font family"*. Kemudian masukkan *font* kustom yang digunakan, disini saya menggunakan **_"MesloLGS NF"_**.

![vscode-integrated-font.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624256769404/8eePVJLYL.png)

(3). *Restart terminal* pada vscode atau cara yang lebih sederhana adalah tutup dan buka kembali *terminal*. Seharusnya terminal pada vscode sudah tidak bermasalah menampilkan kustomisasi *font*.

![vscode-terminal-normal.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624257023057/Vn1ANAcol.png)