Search code examples
htmlcssfontsphotoshopletter

Unwanted filled letters in webpage

I am using this great font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro) I wanted to use this font in a webpage of mine. I've put the .ttf file in a map named 'fonts' and referred to it in CSS.

nav a{
    background:#9cf2e6;
    display:inline-block;
    color:#0;
    text-decoration:none;
    font-size:15px;
    font-family:'Munro';
    margin:13px 3%;
    padding:7px 2%;
}

Then I noticed something. The O's in my webpage are filled. As you can see it shouldn't do this, because it did not do so in Photoshop or the webpage from Fontsquirrel. Also I tried to modify the font in Glyphs but there seems to be nothing wrong with it there.

https://i.sstatic.net/STU5r.jpg

My question: how will I undo the filled letters in this font? Is this a problem because it ain't a webfont from Typekit or Google fonts?

Thank you so much for all the help I can get.

Solution

  • I'm unable to reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters display just fine (see image below). And I think that's the bigger issue: fonts not made for the web are likely to be rendered very differently across browsers and platforms (if at all). If you want to make sure these buttons look the same for all your users, stick to the images you created with Photoshop (and perhaps save them as PNG-8 with transparency rather than PNG-24 to shave off some kilobytes).

    Technically, you can turn any TTF file into a web font, using FontSquirrel's Webfont Generator, for example. The font's license has to allow this, of course, because you'd essentially be redistributing the font. Just placing the TTF file in a /fonts/ folder and using font-family: Munro;, however, is not going to cut it, and only works for you because you have previously installed the font on your computer.

    If I have, say, the Ubuntu font installed on my computer and I visit a webpage that references it in its stylesheet, my browser will not bother downloading it from the webserver, but instead loads it from my hard drive (or memory), which saves bandwidth and is much faster. I've also found that having a font installed locally can actually make it render differently than when it's loaded as a web font (e.g. WOFF).

    So yes, it probably is a problem because this particular font is not very web-friendly, but even with web-friendly fonts, like those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it may be a fun exercise to try and recreate the images using just CSS, you're probably better off saving these buttons as images, or using a font that is web-friendly. Something from the Monospace category in Google Fonts, perhaps?

    https://i.sstatic.net/9SuMr.png (Windows 7, Chrome)