I am working on this site now, its a store of my friend with retro computers. He wants me to add 8-bit like font. I searched web and found Munro font. First I saw it on demo page and it looked great. I embeded it on https://retro-cloud.eu and didn't notice anything ugly. Not quite, maybe a little bit of blur around some parts of text. Now I know it was because I have very high resolution WQHD. My friend says on a lower resolutions blurry text is more noticable.
How to fix this font display? I know if I align properly pixels of font with pixels of screen there shouldn't be blur effect. I know also there are fractions of pixels in CSS... Should I use only specified font sizes?
This is how I declared fonts in CSS
@font-face {
font-family: 'Munro Narrow';
src: url('hinted-MunroNarrow.eot');
src: url('hinted-MunroNarrow.eot?#iefix') format('embedded-opentype'),
url('hinted-MunroNarrow.woff2') format('woff2'),
url('hinted-MunroNarrow.woff') format('woff'),
url('hinted-MunroNarrow.ttf') format('truetype'),
url('hinted-MunroNarrow.svg#MunroNarrow') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Munro';
src: url('hinted-Munro.eot');
src: url('hinted-Munro.eot?#iefix') format('embedded-opentype'),
url('hinted-Munro.woff2') format('woff2'),
url('hinted-Munro.woff') format('woff'),
url('hinted-Munro.ttf') format('truetype'),
url('hinted-Munro.svg#Munro') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Munro Small';
src: url('hinted-MunroSmall.eot');
src: url('hinted-MunroSmall.eot?#iefix') format('embedded-opentype'),
url('hinted-MunroSmall.woff2') format('woff2'),
url('hinted-MunroSmall.woff') format('woff'),
url('hinted-MunroSmall.ttf') format('truetype'),
url('hinted-MunroSmall.svg#MunroSmall') format('svg');
font-weight: normal;
font-style: normal;
}