New to Typophile? Accounts are free, and easy to set up.
Recently my web browser (chrome) started displaying little blocks instead of text.
Here I have an example of the problem (from the yahoo login website):
I have no idea how to solve this and since this is sort of a 'typographical' problem I thought you guys might be able to help.
Here is a larger image of the symbol:
I can still copy and paste the text and it will display the right text, so I think it has to do something with the font. Anyone have any idea what might cause this problem?
The SVG font format has support for kerning via the hkern element. Is kerning in SVG fonts supported by any web browser?
I'm just trying to add kerning to my SVG fonts and it didn't work. I'm not sure what the source of the problem is, is it the lack of browser support or is it my font.
Any info or reference implementation would be helpful.
Thanks in advance
I'm amateur on type. I've had some problems with type rendering across browsers, searched all over the web for good articles but still nothing.
I don't have time to really study and understand font rendering right now, but I need to find what fonts I can use. Fonts that, even if they display differently across browsers, still look good (not creepy).
1) Can you guys list the fonts you know look good on the popular browsers?
I mean IE8+, Chrome, Safari, Firefox (including mobile versions).
→ Preferrably Google Web Fonts.
2) Do you know a website focused on this issue (crossbrowser type)?
Are there any foundries/services who's fonts seem to render best across all platforms (Windows/Linux/Mac/Mobile)? Who puts extra care into their webfonts?
The Font Testing Page is a tool primarily intended for type designers and independent foundries. It can also be used by art directors, graphic designers, teachers and students interested in seeing how a typeface works on the web.
There is a short video at:
Operation is simple:
- First, you must accept the request from the browser.
- Then drag the font you want to try to the upper area of the Testing Page.
Below you will find 8 buttons: Headlines, Text, Lowercase Only, Adhesion Only, Caps, All Caps, Layout and Kern.
- Headlines: Displays examples: 72, 60, 48, 36 and 30 to 12.
- Text: Displays text blocks, from 20 to 10.
- Lowercase only: Displays examples of 72, 60, 48, 36, 30, 24, 18 and 16 to 10.
¿Por que is Safari doing these discrete steps (top part of image) in font-size when Firefox is not (lower part of image)?
The way Safari does it is winding me up to the n'th degree.
I am having an issue with a font in development, and it is this: The vertical stems are too irregular in width/colour/weight when they are rendered in webbrowsers like Safari or Firefox in OS X. Firefox is marginally better than Safari. A PDF has the same issue, but to a lesser degree. All the stems in question are of exactly the same width. Other fonts like Ariel or other webfonts do not show this issue. I tried both CFF/OTF and TTF, but they both have the same issue. This leads me to think there is some hinting setting I have borked, but OS X does not use hinting, so huh? What can be wrong? I'm working with a UPM of 2048, but I seem to remember making a test in 1000, and that had the same issue.
I'll be grateful for any pointers, hints, puns.