I am developing a game in HTML5/Canvas. Most of my game objects are represented as Uncicode glyphs.
I have three fonts embedded on the site in a bunch of different formats. All three of these fonts have support for most of the glyphs in the Basic Multilingual Plane and the Supplementary Multilingual Plane (in other words: They contain the symbols I use as game objects).
While I was testing out the prototype across multiple browsers, I quicly realized that something odd was going on in Firefox/Gecko. I put together a little test, and here's what I found.
In Chrome and other Webkit-based browsers, all characters of all the fonts render fine.
Firefox seems to have problems to load the fonts though. This is strange: I have supplied the fonts in all usual formats (ttf, eot, woff, svg), and there's no cross-site shenaningans going on since they are saved in a subfolder of the folder containing the current page. However, firefox shows all text in the default font (Times New Roman) instead.
Also interesting to note is the fact that if you use a font that is not included in the web-page but is installed on your local computer, Firefox will show the normal Latin characters, but any other unicode characters will again turn up in Times New Roman.
This is either a bug in Firefox, but more likely is of course that I have made a mistake somewhere. Can someone point out what causes this problem and how to resolve it?
Pictures:
Firefox has trouble with the fonts, they all look the same:
The page as it should look, using Google Chrome:
To check it out yourself, here is the page with the current prototype: http://wmmusic.nl/codexamples/pixijs/fonttest/smuv2.html
EDIT:
After doing some research and asking around in the #firefox IRC channel of Mozilla, I found out that there is something wrong with the .ttf fonts I am using. It seems that somehow some table in the font is corrupted in a way that makes Firefox unable to load it.
The debugger shows the following error :
[14:05:04.286] downloadable font: table 'post': failed to parse table (font-family: "unifont" style:normal weight:normal stretch:normal src index:2)
source: http://wmmusic.nl/codexamples/pixijs/fonttest/fonts/unifont5-1.ttf
[14:05:04.286] downloadable font: rejected by sanitizer (font-family: "unifont" style:normal weight:normal stretch:normal src index:2)
source: http://wmmusic.nl/codexamples/pixijs/fonttest/fonts/unifont5-1.ttf
It does this for both fonts (unifont and Code2000), in both the .woff and the .ttf formats (those are the ones Firefox reads). Quivira seems to work now. Quivira is the only font I've converted with FontSquirrel since it is the only font small enough to do so.
The other fonts I've converted using FontForge(for the .svg format), a CLI called tff2eot (for the .eot format),and a tool from Mozilla called sfnt2woff(for the .woff format).
Now to figure out how to fix these errors and/or make Firefox not care about them.
Add to the page header:
<meta charset="utf-8">
By the way, the page takes really long time to load!
Related
I have IE11 on IE10 mode, and I want to load a css file. I have this
#font-face {
font-family: celestesansbold;
src: url('celestesanscomp-bold-webfont.woff2');
}
And then in the console I see this
CSS3111: #font-face encountered unknown error.
celestesanscomp-bold-webfont.woff2
And in the network tab I see
Name Protocol Method Result Content type Received Time Initiator
.../celestesanscomp-bold-webfont.woff2 HTTP GET 200 font/woff2 (from cache) 0 s
And the don't does not load correctly on the page, the text does not change.
Does anyone know what's wrong?
However regular woff files work, but this is woff2.
Thanks
IE doesn't support woff2. That's why you need to provide woff.
In fact, woff is the standard and it's all you need.
You only load woff2 because it provides better features for less bandwidth in browsers that do support it.
Older versions of IE used to need eot, but it's deprecated now.
However, providing more than one font type file does not mean the browser loads all of them. It stops loading them when it finds one it successfully activates. Which means their order is quite important. You want to put the more modern/efficient ones first and the larger ones (fallbacks) last.
It should be: woff2, woff, eot, svg, ttf/otf.
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.
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.
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?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.