Bitmap fonts are rendered incorrectly with integer scaling

[zoltan-magyar]

I am trying to reproduce a style that I use on an older 14" 1080p ThinkPad.

The main idea is to use bitmap fonts wherever possible, this includes Sway, Foot, Fuzzel and Waybar. The font itself is Cozette (AUR: cozette-otb)

My main goal was to bring this configuration over to my desktop, where I use a 32" 4K screen. This obviously requires scaling that is handled well by Sway and Foot. Everything is crystal clear at 2x scaling set in Sway, except for Wayland.

For some reason it cannot render these fonts pixel-perfect, making them a blurry mess no matter how much I spend on the style.css.

As soon as I turn off scaling (setting it to 1) the issue disappears.

Is this something that can be resolved? It certainly shouldn't be a problem with integer scaling.

A separate issue, but it might be a solution, is that I cannot choose between the 2 Cozette styles.

fc-list output:

/usr/share/fonts/misc/cozette.otb: Cozette:style=Medium
/usr/share/fonts/misc/cozette_hidpi.otb: Cozette:style=HiDpi

If I want to use font-style, Waybar crashes immediately. Not exactly sure what would be the correct approach here. The HiDpi has 2x scaling "built in", which should not be necessary, but I would like to try it.

/* Styles */

/* Colors (gruvbox) */
@define-color black	#282828;
@define-color red	#cc241d;
@define-color green	#98971a;
@define-color yellow	#d79921;
@define-color blue	#458588;
@define-color purple	#b16286;
@define-color aqua	#689d6a;
@define-color gray	#a89984;
@define-color brgray	#928374;
@define-color brred	#fb4934;
@define-color brgreen	#b8bb26;
@define-color bryellow	#fabd2f;
@define-color brblue	#83a598;
@define-color brpurple	#d3869b;
@define-color braqua	#8ec07c;
@define-color white	#ebdbb2;
@define-color bg2	#504945;


@define-color warning 	@bryellow;
@define-color critical	@red;
@define-color mode	@black;
@define-color unfocused	@bg2;
@define-color focused	@white;
@define-color inactive	@purple;
@define-color sound	@brpurple;
@define-color network	@purple;
@define-color memory	@braqua;
@define-color cpu	@green;
@define-color temp	@brgreen;
@define-color layout	@bryellow;
@define-color battery	@aqua;
@define-color date	@black;
@define-color time	@white;

/* Reset all styles */
* {
	border: none;
	border-radius: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
	text-shadow: none;
	icon-shadow: none;
}

/* The whole bar */
#waybar {
	background: rgba(40, 40, 40, 0.8784313725); /* #282828e0 */
	color: @white;
	font-family: Cozette; 
	/*font-size: 12px;*/
	/*font-weight: bold;*/
}

/* Each module */
#battery,
#clock,
#cpu,
#language,
#memory,
#mode,
#network,
#pulseaudio,
#temperature,
#tray,
#backlight,
#idle_inhibitor,
#disk,
#user,
#mpris {
	padding: 1pt 8pt;
}

/* Each critical module */
/* #mode,
#memory.critical,
#cpu.critical,
#temperature.critical,
#battery.critical.discharging {
	animation-timing-function:arch bluetooth -16 error linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: blink-critical;
	animation-duration: 1s;
}
*/

/* Each warning */
#network.disconnected,
#memory.warning,
#cpu.warning,
#temperature.warning,
#battery.warning.discharging {
	color: @warning;
}

/* And now modules themselves in their respective order */

/* Current sway mode (resize etc) */
#mode {
	color: @white;
	background: @mode;
}

/* Workspaces stuff */
#workspaces button {
	/*font-weight: bold;*/
	padding-left: 2pt;
	padding-right: 2pt;
	color: @white;
	background: @unfocused;
}

/* Inactive (on unfocused output) */
#workspaces button.visible {
	color: @white;
	background: @inactive;
}

/* Active (on focused output) */
#workspaces button.focused {
	color: @black;
	background: @focused;
}

/* Contains an urgent window */
#workspaces button.urgent {
	color: @black;
	background: @warning;
}

/* Style when cursor is on the button */
#workspaces button:hover {
	background: @black;
	color: @white;
}

#window {
	margin-right: 35pt;
	margin-left: 35pt;
}

#pulseaudio {
	background: @sound;
	color: @black;
}

#network {
	background: @network;
	color: @white;
}

#memory {
	background: @memory;
	color: @black;
}

#cpu {
	background: @cpu;
	color: @white;
}

#temperature {
	background: @temp;
	color: @black;
}

#language {
	background: @layout;
	color: @black;
}

#backlight {
	background: @gray;
	color: @black;
}

#battery {
	background: @battery;
	color: @white;
}

#tray {
	background: @date;
}

#clock.date {
	background: @date;
	color: @white;
}

#clock.time {
	background: @time;
	color: @black;
}