I want to use special font on my website, but the file is over 9 MB. Is it possible to reduce font's size? Thanks folks!
If the font's EULA allows it, you can shrink down the number of glyphs in an OpenType font using FontForge.
Unless this site is being served over a LAN connection, using a 9MB font is ridiculous. That would force each user to be downloading a 9mb file just to view the font you use. You would be much better off picking a font that everyone has.
www.fontsquirrel.com offers the font-face kit section that converts fonts for you - one of the choices is to have a subset of glyphs - only uppercase or just numbers. That might help to reduce the size. Typically fonts served as WOFF are below 100kb.
Even if you shrink the font, most users' web browsers won't download or display it.
http://www.webdirections.org/blog/the-return-of-font-embedding-to-the-web/
Related
I have an – character that becomes invisible when the text is rendered at a smaller font size (the applicable font-size rule is 14px, at which it is invisible; if I zoom in one level in Firefox, it becomes visible.) I have only seen this behavior on Firefox on Windows. With Firefox on Linux, I see the character at all sizes. I believe that what happens is that at smaller sizes, the dash is allowed to render as a line of zero width. So the question is, how can I remedy this? Here's what I can think of -
Try a different dash character and hope for the best
wrap the dash in a span and force it to be bigger - seems clunky
maybe my font definition is broken - this is embedded Open Sans
any other approach I'm overlooking?
Don't use any of the legacy 90's Microsoft core fonts in Windows (Arial, Verdana, etc). They have very aggressive hints intended to prevent "fat" or "blurry" stems at all costs, that result in some of those stems disappearing at small sizes. Perpetuating the pixelated look Windows users were accustomed to was the only thing Microsoft cared about at the time (there are built-in workarounds in the Microsoft rendering stack to hide the bugs of those fonts, but they don't exist in third-party apps).
Have you tried a different font-family to see if it's showing the same problem?
This is a problem of fonts, not browser support. Try to use another font like "Times New Roman" to verify.
In the case of the small icons, the most reliable solution is to use the CSS #font-face rule to ask the browser to download a particular font. Then you'll know for sure that the user has an appropriate font installed. There are even some fonts designed specifically for this use, with extra icons built in: "Font Awesome" is a well-known example.
Please look here for more information: Does every browser support all unicode?
I'm looking for a strategy for dealing with font-family availability.
I have sites using OTFs EOTs but for one reason or another, the font won't load for various devices/platforms and the font falls back to the 2nd or 3rd choice. Unfortunately, the fallback rarely has the same line-height or margins. I've used jQuery to adjust the CSS accordingly, but that's a lot of effort for anything but a very small style sheet. I'm wondering if there isn't a better strategy.
Or... if there's a way to troubleshoot -why- a Google Font or EOT or OTF won't load and perhaps cut down on those cases?
I realise one can use Google fonts and so on, but those are IMHO... forgive me... mostly -dreadful- looking.
Different browsers use different formats for fonts. For example, IE uses .eot files where as other browsers use .otf, .ttf, or even svg. Your best bet is to store multiple types of a font that would want to use and then declare them all in the #font-face block.
A good article about this can be found: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
I wanted to know if loading huge webfonts can cause issues on the browser ?
I have to use a Korean font ( Malgun ) which is 4Mo. And the bold one which is 4 megs too.
I use them on an ipad exclusively for a phonegap project.
Is there a risk of taking a lot of memory ( I mean, 8Mo ) into the browser ?
Thanks for your answers
Yes, this will affect the browser in that you will have to download the font when you first visit the site. That is a pretty large font file, though. You should consider taking the font into FontLab and truncating it to only the glyphs you need. You may also want to look to see if there is a vector or web version of the font.
If these aren't an option, you could also try asynchronously loading the font. Here is a great post on CSS tricks about loading things asynchronously. You would simply substitute the JS file in this example with a stylesheet containing your #font-face declarations. Note: This method may cause a flash of unstyled text.
I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
I am currently making a mobile version of our application and I am trying to find a resource that lists out what Fonts the Blackberry devices support. I search around on the Blackberry development site and forums but have not had much luck.
So far, any font I specify using CSS does not appear to be working.
If you can't find a list of supported font names, you can simply specify font-families. These are the font-families used in WCSS (WAP CSS):
serif
examples: Times New Roman
sans-serif
examples: Arial, Helvetica
monospace
examples: Courier
cursive
examples: Zapf-Chancery, Caflisch Script
fantasy
examples: Western, Critter
Content Design Guidelines from RIM:
Best Practices: Using fonts effectively in your web content
Modify fonts judiciously. Use the user-defined default font for the BlackBerry® Browser where possible, unless you have a
specific need to select a different font. Although using the user-defined default font makes it more difficult to control layout
and appearance, it avoids issues of choosing a font face or font size that the user finds hard to read. Users will either change
the default BlackBerry Browser font to a suitable font face or and font size, or accept the theme-specified default font.
Avoid absolute font sizes where possible. If you change the font size, use relative sizes, such as larger, smaller, xx-large, and
so on. In standard text flows, such as a series of paragraphs, changing the font size is unnecessary, since text will wrap.
Keep in mind that the user can specify the smallest font size for the BlackBerry Browser, so relative or absolute font sizes
that are less than the specified smallest font size will produce no effect on a user's device.
Some resources you might be interested in:
Documentation for Developers (Blackberry Browser) - Includes CSS guide.
Browser Specification (flash presentation)
WCSS Tutorial
User-Agent Profiles of all Blackberry Devices - Shows supported mime-types, character sets, screen size, Java support, etc.