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.
Related
I'm trying to make VS Code editor to look exactly like Visual Studio. I made sure the font settings are exactly the same, however text still renders differently in VS Code (it seems "lighter").
Is there any way to fix this issue?
In the image below the top text is copied from Visual Studio while the bottom one is copied from VS code.
I know the difference is subtle but is still pretty noticeable.
Font rendering in VSCode has been a reoccurring issue throughout a good portion of the editors life time. Font rendering, especially in portable GUI's, is affected by several different layers, for example:
Your Graphics Card can affect the way font is rendered (you can try adjusting the graphic cards settings manually).
Your Monitor, obviously, affects rendering. In fact your monitor has a huge impact. (Try playing with your Monitor's Settings)
The color settings that are offered by your OS may have an impact (often times the color settings are the same as the graphic card settings though. Which means you can just use your OS's GUI to adjust your cards settings in some cases (Not on Ubuntu though))_
Somethings are out of your control, like:
VSCode, it is written using Electron v6. Not only does Electron impact font rendering, but when VSCode switched it Version 6 a lot of people reported a decrease in the editors font rendering quality.
VSCode also implements Anti-Aliasing tools, but as far as I can tell, they auto configure, so you have no control over this. These tools are likely to be one of the biggest causes to the difference in rendering you see, between VS IDE & VS CODE. There is a tool however that may give you some control over the Visual Studio side of rendering that I share a link to below. And just as an FYI, the Anti-Aliasing that VSCode uses is called Sub-pixel Rendering, which is something that Visual Studio doesn't implement as far as I can tell.
The Area You Have the Most Control in:
There is ONE tool/thing that you have 100% control over, that also greatly affects font-rendering, and that is the font that you decide to use. When choosing a font, you have the choice of equipping an OTF, or a TTF. In my personal experience, OTF's render better 90% of the time. The difference is in how they are created.
TTF fonts are made using quadratic Beziers.
OTF fonts are made using cubic Beziers.
Links above are the same
Fonts use something called font-hinting
Font hinting. Essentially font-hinting is a list of instructions that dynamically changes the way a font is rendered, by using the rasterized grid background as a parameter. adjust the display of an outline font so that it lines up with a rasterized grid. Choosing a quality font equipped with good hinting is critical for non-blurry readable text.
Many people choose font because like the way they look, or the italic version of the font they use is popular. When choosing a font, it is extremely important to choose, not the coolest one, but the one that renders with the highest quality, and is the easiest for you to read.
Well Rendering Fonts:
Not only are their fonts that render well, with ligature support, but the best rendering fonts are always free IMO. Bellow are Fonts that use font hinting and have top notch rendering abilities.
JetBrains Mono (JetBrain's Font & My Personal Favorite)
Cascadia Code (Microsoft's Programming Font from 2019)
Fira Code (Not that old, but not that new either. Is loved by many.)
Fira Mono (No Ligatures, Different Font than Fira Code)
Consolas (A classic)
Menlo (Another Classic)
The top 4 are at the top of the list because they receive updates ever few months. I don't think Menlo & Consolas receive regular updates, but they aren't left forgotten either, the are updated every year or two.
To finish with as solid of an answer as I can provide:
_"Getting VSCode to render like the Visual Studio IDE, is not something that you will probably get, with 100% satisfaction, getting an exact match with all of the different factors is just an extremely and possibly impossible thing to due. You can probably make the way the two pieces of software render, more a like, not in functionality, but in looks. It would probably help a great deal to make sure that everything that affects rendering is up to date, editor, IDE, fonts, tools, ect... From their you can try different versions, and see if maybe an older version of VSCode rendered in a way that is preferable to you. You should also play with your monitors settings. I have found that I can accomplish a great deal just through the buttons under the face of my monitor. Check Visual Studio for any rendering settings it might have, VSCode doesn't have much available, but maybe Visual Studio IDE does (I haven't used the IDE in 5 years so IDK if it does).
On a final note:
Their is one tool that could help you, I haven't used it, because it isn't for VSCode, it's for Visual Studio, but it might give you more control than you have now. The tool is called..."_
Text Sharp (Click Here to see it in the VS Market Place)
Is there an easy way to use the built-in icons of the Firefox browser, such as the add, remove, or refresh icon, in a XUL firefox extension? I would like to use the icons in a toolbar to be consistent with the browser design.
I have been looking high and low for an answer, but the web is strangely devoid of this little piece of information. Therefore it must either be dead simple or not possible. I hope the former...
Thanks already for all your help :)
The resources, such as icons, are accessible from add-ons.
E.g. the browser reload icon is at chrome://browser/skin/reload-stop-go.png (you can open this in your Firefox). This particular icon would be used in conjunction with -moz-image-rect bases sprite-ing.
Icons are usually specified in the CSS rules for the browser (Firefox) or the global package (aka. toolkit). To find out where something is, I'd recommend the DOM Inspector add-on, inspecting the Chrome window itself and looking in particular at the CSS and/or computed styles view. Also, you may look directly in the source, e.g. on MXR.
Word of advice: Should you always double-check that browser/toolkit resources are actually available on all platforms and are accessed the same way, have the same URI, dimensions in case of icons, and so on. In particular with add-ons, quite often the platform themes will use platform icons (e.g. GTK stock icons on linux) or provide multiple alternatives (Win aero and regular icons, or regular and #2x hidpi ones).
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.
I'm sure this has been discussed before, but I can't find any canonical question / answer.
Currently, IE9 and Firefox 4+ both use different font rendering that produces (for some) more blurry fonts but overall better kerning and more consistent results. Also, it renders non-standard fonts on Windows much better. I've have not done a thorough investigation, but I think it has to do with the fact that both IE9 and Firefox use now a different graphics layer which in apparently renders fonts differently. Also, the reason some of the standard fonts such as Arial, Tahoma etc. look in Firefox the same as 10 years ago is that it actually has a list of exceptions for them (look for gfx.font_rendering.cleartype_params.force_gdi_classic_for_families).
So far so good. The problem is Chrome. It still uses the old font rendering that makes the non-standard fonts practically unusable. Just for illustration, the font I had in mind was: http://www.google.com/webfonts/specimen/Play. Just open the sample in Firefox/IE9 and Chrome and you should see the difference. Is there anything I can do? Or should I look for a more optimized font.
Update: I see it's a common problem: the headings on http://www.smashingmagazine.com look very jaggy in Chrome.
Update: Sample image:
I have read that Chrome (originally Chromium) has anti-aliasing issues that's why it's jaggy.
Using font-faces also makes a difference than using local fonts in your system. So, all we can do is just wait until they fix this issue or help the Chromium Project if you can.
Known issue. You can try gdipp or MacType.
Copying my anwswer from Making CSS3 #font-face font rendering play nice with ClearType on Windows
A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsers got an answer that solved the same issue for me.
The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generator optimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.
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.