Unwanted filled emails on a web page
I am using this large font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro) I wanted to use this font on my webpage. I put the .ttf file in a map named "fonts" and referenced 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. O on my web page are full. As you can see, it shouldn't do this because it wasn't done in Photoshop or on the webpage from Fontsquirrel. Also I tried to change the font in Glyphs but there seems to be nothing wrong with it.
My question is, how can I reverse the filled letters in this font? Is this a problem because it is not a webfont from Typekit or Google fonts?
Thank you so much for all the help I can get.
source to share
I cannot reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters are displayed very well (see image below). And I think the big problem is that fonts not built for the web are likely to render differently across browsers and platforms (if at all). If you want these buttons to look the same for all of your users, stick with the images you created with Photoshop (and maybe save them as PNG-8 with transparency, not PNG-24 to shave off a few kilobytes).
Technically, you can turn any TTF file into a web font, for example with the FontSquirrel Webfont Generator. The font license must allow this, of course, because you will essentially be redistributing the font. Just placing the TTF file in a folder /fonts/
and using it font-family: Munro;
, however, will not shorten it and only work for you, because you have previously installed the font on your computer.
If I have, say, an Ubuntu font installed on my computer, and I visit a web page that links to it in my stylesheet, my browser will not download it from the web server, but instead download it from my hard drive (or memory), which saves bandwidth and is much faster. I also found that having a locally installed font can actually render it render differently than when loaded as a web font (like WOFF).
So this is probably a problem because this particular font is not very website friendly, but even with web fonts such as those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it might be a fun exercise to try and recreate images using just CSS, you are probably better off not saving these buttons as images, or using a font that is web based. Something from the Monospace category in Google Fonts, maybe?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
source to share