Patched Fonts

Bối cảnh

Dạo gần đây mình đang setup NeoVim làm editor cho việc lập trình. Trong quá trình cài đặt thì có cài 1 số plugins để make color như thằng lspkind. Plugin này cho phép hiển thị các icons như module, functions, struct, … trong popup suggestion code.

Vấn đề là khi mình cài xong thì không thấy hiển thị cái icons nào cả =))

Và mỗi lần như thế này mình lại nhớ tới 1 comment đã từng đọc trên Reddit:

Whenever I see that box, that I know I miss some font.

Install Patched Font

Trước đây khi cài theme powerline cho zsh, để hiển thị đúng được các icon, mình nhớ là cũng cần phải thay đổi font cho terminal về thành Powerline Mono. Nhưng lần này mình đổi thử thì vẫn không thấy thay đổi gì :think:

Sau khi đi search thử, mình biết tới 1 khái niệm mới: Patched font.

Patched Font

Patched Font là 1 version font đã được modified. Đại ý hiểu là: Bạn có 1 font, giờ bạn “add” thêm/ remove đi 1 số kí tự, biểu tượng, nét chữ, … để cho nó có thể hiển thị đẹp mắt hơn.

Ở đây mình cần 1 patched font support việc hiển thị các icons trên terminal.

Trên mạng cũng có những bộ font đã được patched, support nhiều bộ icon như devicon, codicons, … Nhưng càng add nhiều support thì fonts đó càng nặng hơn, mà mình lại không cần dùng đến.

Google thử thì mình tìm thấy 1 repo có tận 43k stars: nerd-fonts. Repo hướng dẫn tận 9 cách để patch 1 bộ font theo ý mình.

Patch Your Own Font

Để patch 1 bộ font, như trong trường hợp của mình thì cần 3 thứ: 1. Bộ font (ở đây mình dùng font Hack Nerd Font). 2 là bộ icons (Ở đây mình dùng Codicons) và 3 là phần mềm hỗ trợ việc patch fonts (Ở đây mình dùng Fontforge)

Download script + bộ icon ở đây, sau đó giải nén.
Download bộ font Hack Nerd Font ở link trên, cho vào cùng thư mục với script.
Trên OSX, cài đặt fontforge: brew install fontforge
Run command to patch font: fontforge -script font-patcher Hack.Nerd.Font/Hack\ Regular\ Nerd\ Font\ Complete.ttf --codicons

Ở bước 4 mình mất khá nhiều thời gian do không đọc kĩ hướng dẫn sử dụng :(

Nerd Fonts Patcher v3.0.0 (4.1.0) (ff 20230101)
usage: font-patcher [-h] [-v] [-s] [-l] [-q] [-c] [--careful] [--removeligs] [--postprocess [POSTPROCESS]] [--configfile [CONFIGFILE]] [--custom [CUSTOM]]
                    [-ext [EXTENSION]] [-out [OUTPUTDIR]] [--glyphdir [GLYPHDIR]] [--makegroups [{0,1,2,3,4,5,6}]] [--variable-width-glyphs]
                    [--has-no-italic] [--progressbars | --no-progressbars] [--debug] [--dry] [--xavgcharwidth [XAVGWIDTH]] [--fontawesome]
                    [--fontawesomeextension] [--fontlogos] [--octicons] [--codicons] [--powersymbols] [--pomicons] [--powerline] [--powerlineextra]
                    [--material] [--weather]
                    font

Mặc định, script font-patcher chỉ cài đặt 1 số bộ icon cơ bản, còn nếu muốn cài thêm các bộ icon khác (như ở đây là codicons) thì cần phải thêm nó vào trong command line options.

Anw, trên đây là các bước để có 1 patched font. Bước cuối cùng chỉ còn là vào Settings của Terminal, thay đổi font là ok. Với iTerm2 thì sẽ là Preferences > Profile > Text > Font

Hope it help :D