What is the difference between embedded web fonts and regular TrueType desktop fonts? - font-face

I have a good free desktop font and it is free also for font embedding on the web.
The font uses Arabic Unicode and it is TrueType desktop font.
I want to use this font on my website. The problem that most web font converters or generators like font squirrel and typeface.js render the letters separately, not linked together.
I used this Unicode ranges to create the web fonts:
FE70-FEFF,0600-06FF,FB50-FDFF,0750-077F,0621-0652
This should convert all Arabic Unicode characters and should make the letters linked together or attached together like what happen on desktop font but that does not happen.
Can I just use the desktop font file itself without converting it?
What is the difference between a regular desktop font and web embedded font?
BTW, the font desktop file is only 27kb and I tested it in Firefox. It is working great if installed on the system (of course it is on my computer).

Yes, you can use the ttf file itself. Most browsers, except Internet Explorer 8 and lower, support this format.
To support IE8 as well, you must transform the font into an eot file and upload that too. Can't really recommend any specific font converter, having no experience with Arabic fonts, but I'm sure there must be others except fontsquirrel. Have you tried FontForge?
Anyway, in my experience, font files downloaded and installed into the user's system work far better than web fonts, because font support from within the browsers is far from optimal. Some fonts work, others don't with no indication why, yet others don't display well (with the wrong spacing, or as if there is no hinting, etc).
So if you do use a web font, make sure you a) test thoroughly in many different browsers, and b) provide good fallback fonts in the css, in case your webfont doesn't work.

Related

WhatsApp font for emoticons (unicode, windows)

does anybody know how to render these emoticons in Windows given the unicode charcode?
It looks like this icons or font are native to apple (as sayed here) but I don't know which one I can choose to render these glyphs in Windows
Thanks
If whatever you're using to display your text is working correctly and the user has a suitable font installed, then you don't need to do anything. Font substitution will take care of that and choose a font that contains glyphs for those characters.
Windows since 8.1 ships with Segoe UI Emoji, however, if you absolutely need a font to specify explicitly.

Make fonts on Windows render like Mac/Linux: disabling font-hinting and/or deal with anti-alias on client side

Is it possible to turn off "font-hinting" on Windows via javascript or any other client side code?
I want browsers on Windows to mimic fonts the way they look on Mac - because I'm using an HTML-to-PDF tool (PrinceXML) which I think is the best in the market so far but it renders fonts like a Mac. So what's happening is that Windows users will create HTML-based designs which will then get rendered by the PDF conversion tool. But the fonts will look different on the PDF than what they did in the Windows-based browser - I want them to look the same.
Any workaround for this?
I'm not sure what you mean by "renders fonts like a Mac", but Prince documentation says it uses Times New Roman, Arial and Courier New, and gives instructions on how to change this.

Font characters not showing in Firefox and IE9

I made a custom font for a set of icons using Inkscape and used the Free Online Font Converter and Font Squirrel to generate the different font types (woff, eot, ttf, svg) and the #font-face code for inclusion.
The font works fine in Google Chrome with the ttf, svg and woff-font and in Internet Explorer 7 and 8, but in FireFox 13 and IE9 certain icons do not get rendered. The other icons of the font do work correctly, so there is no problem with the file getting delivered. Also because the fonts work in Chrome, the conversion seems to have succeeded.
I think the problem has something to do with the type or shape of the icons I'm using, but I can't find anything in particular that differentiates these two icons from the others I have used.
The problem can be reproduced in my ASP.NET project, but also locally using the testfiles which Font Squirrel supplies.
Update: Still did not figure out the solution, but I found out that when the same TTF-font is installed in Windows, it does work in Firefox. But when it is referenced through #font-face, it does not.
Going to guess it has something to do with the fact that either your fonts or your font's CSS is not being called from the same domain. Both Firefox and IE9 enforce a Same-Domain Origin Restriction. Therefore do not use domains in your link tags or your CSS font-face code.

Display Arabic content in wp7

I am developing app for window phone 7 .I call one service that return me xml. This xml contain Arabic as well as English content. I can read English content but for Arabic character output look like this ?????????.
I want to display both Arabic and English content in my app please help me
Looking at the Segoe WP family of fonts I have on my computer (which I got by installing the WP7.5 dev tools), the font doesn't contain Arabic characters. This is why you're seeing question marks.
So, seems like you need to use some other available font which contains Arabic characters or embed your own entirely. See this link for a list of available fonts, the editor is a bit weird in the sense that it allows you to use any font even though there's just a limited set of fonts available.
I think the following post may help you:
Indic language display

Is Rockwell a web safe font?

Recently we received a mockup for a website from a client that makes extensive use of the Rockwell font all over the layout for menu items, articles titles, block titles, etc...
I never heard of that font before and I assumed that it wasn't web safe, also I checked online in several places to confirm this, like here and here, but couldn't find any reference to this font.
So after telling to the designers that we are going to need to use some kind of text replacement technique for using this font they told us that this is, indeed, a web safe font and that they checked in Windows and Mac and the font is installed.
So we are going to use this font but I'm still curious if this is a standard font or it's installed with an Adobe product or any other application.
Does anyone have any info on this?
There's a very small set of web-safe fonts; Rockwell isn't one of them because it comes with third-party software like Microsoft Office.
That said, if you must use Rockwell as your primary font, be sure to define a decent font stack for it. That is, use CSS to define a list of fallbacks, where each fallback is a web-safe font:
body, input, textarea {
font-family: Rockwell, "Courier New", Courier, Georgia,
Times, "Times New Roman", serif;
}
Some information on font stacks:
http://www.petercolesdc.com/web-fonts-nice-honest/ (includes info on Rockwell)
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Nowadays (2011), modern browsers support embedding custom fonts via #font-face. Popular options include Typekit, Google Fonts, and Font Squirrel. Note that not all browsers support loading custom fonts via CSS, so you should still list web-safe fonts as fallbacks.
As an alternative to Rockwell, you can use a font called Arvo from the Google Web Fonts API.
As others have stated, Rockwell is not a websafe font. I, for example, am typing this on a perfectly ordinary Windows box and don't have it. It is installed with certain versions of Office.
The current accepted answer recommends using a proper CSS font stack to feed Rockwell to visitors that have it, and more-common-but-less-suitable fonts to those without. That's excellent advice, so do so.
However, you can actually do one better. All of the modern non-IE browsers either support CSS Webfonts now or will in their next release. This module lets you host fonts on your server and transparently feed it to visitors when they visit, allowing you to use a vast array of fonts that aren't dependably available. Go ahead and add Webfont support now for Rockwell, giving it as the second choice in the font stack (behind ordinary Rockwell). This will allow visitors who are using advanced browsers but don't have Rockwell installed to still get the full effect of your typography, while allowing visitors with lesser browsers to still gracefully degrade to another font.
Finally, if you really need to hit IE with the font, go with image replacement. SIFR is always an option, but it can really slow down a page, especially if you use a lot of it. I'm the developer of PIR, which is an unobtrusive and super-lightweight javascript-based image replacer that uses a PHP backend to generate the images. It grabs all relevant information from the CSS directly, and can even handle word-wrapping automatically. There is also a FastCGI backend in development by one of my users. PIR generates 32-bit PNGs, so it can deliver full transparency (it'll even make the font itself transparent if the visitor is using a browser that knows how to handle transparent colors).
Rockwell is installed with Office 2003 and later, and with some Adobe products. It's not what I would consider web-safe, so be sure to have a fallback. Here's a list of commonly-installed fonts.
Rockwell is installed with office. Might want to try running things on a computer without office!
You can tell your designers than on Windows, Rockwell is not installed by default. It gets installed as part of the Office suite (more specifically, Publisher). More info here: http://support.microsoft.com/kb/837463
Rockwell's availability is inconsistent so i wouldn't rely on it.
However, if Rockwell makes the design work then I'd suggest using sIFR on the fonts to make them appear regardless of what's on the user's computer.
More on sIFR here
Any font is web safe, if you provide reasonable fall-backs. ie:
* { font-family:"Rockwell, Times New Roman, Times, serif";}
Of course that means being aware of the differences between the fall back and desired font. Make sure you test somewhere without that font.
I have Mac OS 10.5.6 (Leopard) with all updates to date and have no such font on my system. I also have a fresh install of Windows XP on a virtual machine, no sign of Rockwell there either.
I think your designers just want to avoid further work.. I've never heard of Rockwell before "Sketch Rockwell" was featured in Smashing Magazine a couple of months ago.
I'd go for sIFR, too, especially if you use the font in sizes larger than 16. It's not only about not having the font, but browsers running on Windows don't antialias fonts and that makes them look terrible at larger sizes. You can find a nice sIFR tutorial here.
Straight answer: Rockwell is not a web safe font. What you can do is obtain the font (it is free to download here and you can import it into your stylesheet and thereby make it available on all your webpages. That way your visitors do not need to have it on their computers in order to view it.

Resources