Nerd Fonts Cut Off Characters, No Spacing, or overlapping #991

dieggsy · 2018-02-02T06:27:36Z

❗❗Maintainer Note❗❗

I'm posting this here at the top so that people can immediately find it.

When using Nerd Fonts in polybar, many icons will either be cut off, overlap adjacent characters, or not have enough spacing after them.

There are several ways to work around this.

Use a non-nerd fonts font for regular text and use the symbols-only variant (Symbols Nerd Font Mono) font as a second font for the icons because the symbols-only fonts don't have that issue. The symbols-only fonts are released in the file NerdFontsSymbolsOnly.zip.
Use the monospaced version of the nerd font. For example if you are using XYZ Nerd Font, use XYZ Nerd Font Mono instead. This will make all icons the same width as regular text; they may appear too small though.
Don't use Nerd Fonts. Nerd Fonts just pulls together multiple fonts, the individual fonts (material design icons, font awesome, etc.) don't have this issue as far as I can tell, using them directly should work.
Manually add one or two extra spaces after every icon you are using. This is really not recommended.

For those interested in the details, read on.

What is happening is that when rendering an icon, our font rendering library (cairo) tells us how many pixels we should advance when rendering the next character.
In the non-mono versions of nerd fonts (except the symbols only variant) that is less than the actual width of the rendered icon.
This causes the icon to be cut off if there is a formatting tag after the icon.
In the other cases, the icon will overlap with the subsequent characters (missing spacing after icon is it simply overlapping with the spacing that should come after it).

This behavior is actually kind of intended according to nerd fonts, have a look at one of the maintainers' comments describing the situation: ryanoasis/nerd-fonts#442 (comment)

Original Post:

I'm seeing this behavior with only a couple fontawesome characters:

The text was updated successfully, but these errors were encountered:

patrick96 · 2018-02-02T09:28:52Z

Does this also happen, if you lower the font size for the fonts those characters come from?

dieggsy · 2018-02-02T14:39:17Z

@patrick96 oh interesting - it doesn't appear to do this if I lower the font size.

patrick96 · 2018-04-16T19:58:14Z

Hmm, I'm not able to reproduce this on my end. Is this with fontawesome 4 or 5?

BVollmerhaus · 2018-06-14T16:45:03Z

I can reproduce this with both Font Awesome 4 (Nerd Fonts) and Material Design Icons, but only if the font size is set to an odd number and fairly low, 11 in my case. On some icons this also appears to lead to some weird discoloration on the side where the character is cut off, see the example below.

mplus Nerd Font:style=Medium:size=11;3

loremol · 2019-11-21T22:07:50Z

Anyone able to solve this?

patrick96 · 2019-11-28T18:37:33Z

Can anybody that experiences this give me a minimal but complete config where this happens. I am still not able to reproduce this.

NicksIdeaEngine · 2020-02-02T22:09:56Z

I can. Here are the config files: https://github.com/NicksIdeaEngine/dotfiles/tree/master/ubuntu/.config/polybar/backup

Edit#2: I have removed all irrelevant modules and moved a simplified example polybar config into a different folder. This only displays the launcher and sysmenu modules where the glyphs are getting cut off.

I'm noticing the cutting off on the launcher and sysmenu module after trying to switch all the glyphs over to the ones from FiraCode Nerd Font.

The cutting off happens when I set font-1 to size 12, 13, 14, 15, 16, all the way up to 20. I was aiming for size 14 or 16 and the rest of the glyphs seem to be working fine. I will try switching module/launcher and module/sysmenu to type = custom/script and see if that changes anything.

Edit: Changing those modules to custom/script and having a script manage the display has worked in not cutting off the glyph. Unfortunately that stopped the content-background and `content-foreground from showing. I hope this info helps!

Here are screenshots:

fmauNeko · 2020-02-10T09:25:46Z

I'm having the same issue since the Nerd Fonts 2.1.0 release.
It's not happening with Nerd Fonts 2.0.0.

The fonts are working fine otherwise in my terminal (Tilix, which is based on VTE), so I guess it has something to do with how Polybar handles the glyphs.

gavsiu · 2020-03-05T22:10:54Z

This was driving me nuts. Glad I found this bug report.

1 padding vs 0 padding:

ghost · 2020-03-20T14:01:23Z

@patrick96 Here is my config: https://gist.github.com/georgianfire/d5a27b5191fe4916e26afd2120bf003c
The last icon of modules-left is cut:
modules-left = firefox vscode:

module-left = vscode firefox:

As pointed out by @fmauNeko this only started happening after Nerd Fonts 2.1.0 release. Changing font size or padding doesn't fix the problem

collinpeters · 2020-04-13T06:26:39Z

ryanoasis/nerd-fonts#442

saladuh · 2020-07-20T05:48:31Z

Wanna point out that this may not strictly be a nerdfont issue, I am having the same problem with the Cozette font (bitmap OTB type) in my bspwm workspace module:

It is most noticeable in the last two icons, where the headphone is cutoff at the headband and the film reel is missing the right side.

Using extra space padding before or after the icons does not help at all.

shivanshu-semwal · 2020-12-16T17:04:48Z

Mono nerd fonts work fine in my case on i3.

patrick96 · 2020-12-16T17:13:54Z

@shivanshu-semwal What nerd fonts version and what distro are you using?

shivanshu-semwal · 2020-12-16T18:30:57Z

@shivanshu-semwal What nerd fonts version and what distro are you using?

Monoid Nerd Font Mono - link
Hack Nerd Font Mono - link
NotoSansMono - link
All of these fonts have same results.
I'm using latest version of Nerd fonts available on the nerd-font repo.
Distro - Manjaro Linux x86_64

i3-module is on left side and it is using Nerd Fonts.

patrick96 · 2020-12-16T22:55:35Z

Yeah, I have also noticed that using the monospaced version of the fonts does work properly. All the reports I have seen so far used the non-monospaced version.

TheBabu · 2020-12-30T16:45:40Z

Do you guys think that this issue has anything related to this issue that I posted on notosans?
https://github.com/googlefonts/noto-fonts/issues/1960

patrick96 · 2020-12-30T16:57:34Z

@TheBabu I doubt it. The issue seems to be specific to nerd fonts.

usarral · 2021-01-09T10:16:06Z

I have the same problem and I fixed with the Hack Nerd Font setting that the first

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; ;-       fonts        -; ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

font-0 = "Hack Nerd Font:pixelsize=9;3"
font-1 = "Iosevka Nerd Font:pixelsize=10;3"
font-2 = "FontAwesome5:pixelsize=10;3"

font-3 = "Hack Nerd Font:pixelsize=23;5"
font-4 = "Iosevka Nerd Font:pixelsize=23;5"
font-5 = "FontAwesome5:pixelsize=23;5"

;;;;;;;;;;;;;;;;;;;;;;;;;;

defunSM · 2021-01-14T13:34:06Z

I have the same problem and I fixed with the Hack Nerd Font setting that the first

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; ;-       fonts        -; ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

font-0 = "Hack Nerd Font:pixelsize=9;3"
font-1 = "Iosevka Nerd Font:pixelsize=10;3"
font-2 = "FontAwesome5:pixelsize=10;3"

font-3 = "Hack Nerd Font:pixelsize=23;5"
font-4 = "Iosevka Nerd Font:pixelsize=23;5"
font-5 = "FontAwesome5:pixelsize=23;5"

;;;;;;;;;;;;;;;;;;;;;;;;;;

Did not work for me (using arch, bspwm, hack nerd font)

I had one icon cut off when using Hack Nerd Font regardless of size padding or anything in polybar worked around it by using Hack Nerd Font Mono. However I don't like this work around and would like to use Hack Nerd Font is there any other methods to try to resolve this besides the changing to Mono or lowering font size ( which doesnt work for me) to do this?

See link below for more information. polybar/polybar#991

Shinyzenith · 2021-08-14T20:21:37Z

I have the same problem and I fixed with the Hack Nerd Font setting that the first
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; ;-       fonts        -; ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

font-0 = "Hack Nerd Font:pixelsize=9;3"
font-1 = "Iosevka Nerd Font:pixelsize=10;3"
font-2 = "FontAwesome5:pixelsize=10;3"

font-3 = "Hack Nerd Font:pixelsize=23;5"
font-4 = "Iosevka Nerd Font:pixelsize=23;5"
font-5 = "FontAwesome5:pixelsize=23;5"

;;;;;;;;;;;;;;;;;;;;;;;;;;
Did not work for me (using arch, bspwm, hack nerd font)

I had one icon cut off when using Hack Nerd Font regardless of size padding or anything in polybar worked around it by using Hack Nerd Font Mono. However I don't like this work around and would like to use Hack Nerd Font is there any other methods to try to resolve this besides the changing to Mono or lowering font size ( which doesnt work for me) to do this?

Faced this exact issue today, arch logo was cut off for me. Initially i thought it was a problem with my padding.

I'm using the following font-6=NotoSerif Nerd Font:style=Regular

Blugil · 2022-01-17T09:50:27Z

I have the same problem and I fixed with the Hack Nerd Font setting that the first
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; ;-       fonts        -; ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

font-0 = "Hack Nerd Font:pixelsize=9;3"
font-1 = "Iosevka Nerd Font:pixelsize=10;3"
font-2 = "FontAwesome5:pixelsize=10;3"

font-3 = "Hack Nerd Font:pixelsize=23;5"
font-4 = "Iosevka Nerd Font:pixelsize=23;5"
font-5 = "FontAwesome5:pixelsize=23;5"

;;;;;;;;;;;;;;;;;;;;;;;;;;
Did not work for me (using arch, bspwm, hack nerd font)

I had one icon cut off when using Hack Nerd Font regardless of size padding or anything in polybar worked around it by using Hack Nerd Font Mono. However I don't like this work around and would like to use Hack Nerd Font is there any other methods to try to resolve this besides the changing to Mono or lowering font size ( which doesnt work for me) to do this?
Faced this exact issue today, arch logo was cut off for me. Initially i thought it was a problem with my padding.

I'm using the following font-6=NotoSerif Nerd Font:style=Regular

To me it looks like this specific error only happens when I use the *-background option on any module. Without a background the glyphs render perfectly. I am using font-1=MesloLGS NF:style=regular:fixed:pixelsize=16;8

ARJITMALIK · 2022-03-01T16:35:26Z

Not possibly the solution, but I found an alternate method to counter this issue

I'm having extra padding issue with i3 workspace icons

I just removed the background and underline and also added some foreground color to make the workspace stand out

Im using the latest JetBrains nerd font and Font awesome 6 Brands fonts

font-0 = JetBrainsMonoMedium Nerd Font:style=Bold:size=14;4
font-1 = Font Awesome 6 Brands:size=14;4

Here is my [module/i3]

type = internal/i3
format = <label-state> <label-mode>
index-sort = true
wrapping-scroll = true

; Only show workspaces on the same output as the bar
pin-workspaces = true

ws-icon-0 = 1; 
ws-icon-1 = 2;
ws-icon-2 = 3; 
ws-icon-3 = 4; 
ws-icon-4 = 5; 
ws-icon-default = 

; label-mode = %mode%
; label-mode-padding = 5
; label-mode-foreground = #ffffff

label-mode-padding = 1
label-mode-foreground = #000
label-mode-background = ${colors.primary}

; focused = Active workspace on focused monitor
label-focused = %icon%
label-focused-background = ${colors.background}
label-focused-foreground = ${colors.green}
label-focused-padding = 1

; unfocused = Inactive workspace on any monitor
label-unfocused = %icon%
label-unfocused-padding = 1

label-visible = %icon%
label-visible-background = ${self.label-focused-background}
label-visible-underline = ${self.label-focused-underline}
label-visible-padding = ${self.label-focused-padding}

; urgent = Workspace with urgency hint set
label-urgent = %icon%
label-urgent-background = ${colors.background}
label-urgent-foreground = ${colors.alert}
label-urgent-padding = 1

(Great work with polybar, I'm loving it)

patrick96 · 2022-10-02T14:23:50Z

After talking to the nerd fonts maintainer I now have a better understanding of what is happening and why. I have edited the original post with the, in my opinion, best way to work around this issue.

I will also write up proper documentation about this for the 3.7 release.

fiskhest · 2022-10-03T08:11:34Z

That seems to have done it 🎉 thanks for investigating @patrick96 ! 🚀

patrick96 added the font label Feb 2, 2018

patrick96 mentioned this issue Jan 8, 2019

Option to disable click to mute in alsa and pulseaudio modules #1584

Closed

h1ghrise mentioned this issue Mar 26, 2020

Nerdfont Icons partially cut on workspaces (i3) #2045

Closed

patrick96 mentioned this issue May 9, 2020

Double-width characters in bspwm module #2093

Closed

ltadeu6 mentioned this issue Jul 26, 2020

Nerd Font crop on i3 module only on focused mode #2152

Closed

patrick96 changed the title ~~Cut off unicode characters?~~ Nerd Fonts Cut Off Characters / No Spacing Dec 5, 2020

patrick96 pinned this issue Dec 5, 2020

patrick96 mentioned this issue Dec 5, 2020

No space between Nerd font icon and label #2243

Closed

Cerclique added a commit to Cerclique/dotfiles that referenced this issue May 26, 2021

Add new font (Mono type) in order to get full icon with polybard.

ccfdfea

See link below for more information. polybar/polybar#991

patrick96 mentioned this issue Mar 1, 2022

Extra space around i3 workspace name #484

Closed

patrick96 mentioned this issue May 26, 2022

[Bug]: #2731

Closed

5 tasks

patrick96 mentioned this issue Jun 12, 2022

[Bug]: Half of Icon Missing When Using Colored Background #2738

Closed

5 tasks

patrick96 mentioned this issue Sep 27, 2022

Some symbol glyphs show up as clipped. ryanoasis/nerd-fonts#442

Closed

patrick96 changed the title ~~Nerd Fonts Cut Off Characters / No Spacing~~ Nerd Fonts Cut Off Characters, No Spacing, or overlapping Oct 2, 2022

patrick96 added this to the 3.7.0 milestone Oct 2, 2022

kosorin mentioned this issue Jan 21, 2023

Badly cropped images and icons - new fonts approach awesomeWM/awesome#3766

Closed

patrick96 mentioned this issue Feb 5, 2023

[Bug]: Icons partially cut off #2911

Closed

5 tasks

This was referenced Sep 28, 2023

[Bug]: Icon rendered half when background is colored #3012

Closed

Document recommendations for nerd fonts #3016

Merged

patrick96 closed this as completed in #3016 Sep 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nerd Fonts Cut Off Characters, No Spacing, or overlapping #991

Nerd Fonts Cut Off Characters, No Spacing, or overlapping #991

dieggsy commented Feb 2, 2018 •

edited by patrick96

patrick96 commented Feb 2, 2018

dieggsy commented Feb 2, 2018 •

edited

patrick96 commented Apr 16, 2018

BVollmerhaus commented Jun 14, 2018 •

edited

loremol commented Nov 21, 2019

patrick96 commented Nov 28, 2019

NicksIdeaEngine commented Feb 2, 2020 •

edited

fmauNeko commented Feb 10, 2020 •

edited

gavsiu commented Mar 5, 2020 •

edited

ghost commented Mar 20, 2020 •

edited by ghost

collinpeters commented Apr 13, 2020

saladuh commented Jul 20, 2020

shivanshu-semwal commented Dec 16, 2020

patrick96 commented Dec 16, 2020

shivanshu-semwal commented Dec 16, 2020 •

edited

patrick96 commented Dec 16, 2020

TheBabu commented Dec 30, 2020

patrick96 commented Dec 30, 2020

usarral commented Jan 9, 2021 •

edited

defunSM commented Jan 14, 2021 •

edited

Shinyzenith commented Aug 14, 2021 •

edited

Blugil commented Jan 17, 2022

ARJITMALIK commented Mar 1, 2022

patrick96 commented Oct 2, 2022

fiskhest commented Oct 3, 2022

Nerd Fonts Cut Off Characters, No Spacing, or overlapping #991

Nerd Fonts Cut Off Characters, No Spacing, or overlapping #991

Comments

dieggsy commented Feb 2, 2018 • edited by patrick96

❗❗Maintainer Note❗❗

patrick96 commented Feb 2, 2018

dieggsy commented Feb 2, 2018 • edited

patrick96 commented Apr 16, 2018

BVollmerhaus commented Jun 14, 2018 • edited

loremol commented Nov 21, 2019

patrick96 commented Nov 28, 2019

NicksIdeaEngine commented Feb 2, 2020 • edited

fmauNeko commented Feb 10, 2020 • edited

gavsiu commented Mar 5, 2020 • edited

ghost commented Mar 20, 2020 • edited by ghost

collinpeters commented Apr 13, 2020

saladuh commented Jul 20, 2020

shivanshu-semwal commented Dec 16, 2020

patrick96 commented Dec 16, 2020

shivanshu-semwal commented Dec 16, 2020 • edited

patrick96 commented Dec 16, 2020

TheBabu commented Dec 30, 2020

patrick96 commented Dec 30, 2020

usarral commented Jan 9, 2021 • edited

defunSM commented Jan 14, 2021 • edited

Shinyzenith commented Aug 14, 2021 • edited

Blugil commented Jan 17, 2022

ARJITMALIK commented Mar 1, 2022

patrick96 commented Oct 2, 2022

fiskhest commented Oct 3, 2022

dieggsy commented Feb 2, 2018 •

edited by patrick96

dieggsy commented Feb 2, 2018 •

edited

BVollmerhaus commented Jun 14, 2018 •

edited

NicksIdeaEngine commented Feb 2, 2020 •

edited

fmauNeko commented Feb 10, 2020 •

edited

gavsiu commented Mar 5, 2020 •

edited

ghost commented Mar 20, 2020 •

edited by ghost

shivanshu-semwal commented Dec 16, 2020 •

edited

usarral commented Jan 9, 2021 •

edited

defunSM commented Jan 14, 2021 •

edited

Shinyzenith commented Aug 14, 2021 •

edited