3

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;
}
Marecky
  • 1,924
  • 2
  • 25
  • 39

0 Answers0