I have a design and Myriad Pro is required. This isn't a problem. The issue is that in Photoshop they have used 'Bold Condensed'. I am not sure what this is called, I think it is one of the varients of Myriad Pro. What is the best way to emulate this on a website?
Thanks.
FontSquirrel is your best resource. Their "#font-face generator" creates code that will work with all the modern browsers.
What they do is well-explained but behind the scenes it's pretty complicated. You can read up on the CSS aspects on Paul Irish's blog.
Edit
I just realized that nobody has answered your real question...
1.) Myriad Pro is a family of fonts, implemented as a collection of files, with names like Myriad Pro.otf, Myriad Pro Bold.otf, and so forth. (The actual names are OS-specific.) Myriad Pro Bold Condensed is one of those files. I don't know if it comes with the standard package or whether it costs extra.
2.) You cannot "emulate" this. You can either use the actual font on your webpage (via the #font-face embedding method described above), or create a graphic. The designers probably expect you to create graphics, because designers [tirade deleted] when it comes to implementation.
3.) As has been pointed out, embedding supposedly requires an appropriate license, and I don't know if you can get such a license for this particular face. ("Supposedly", because [tirade deleted], but I'm not a lawyer.)
The 100% guaranteed way is to render it to an image.
CSS3 supports font-face but this will not give you wide support.
#font-face
{
font-family: 'Myriad Pro';
src: url('Myriad-Pro.ttf');
}
You will also need to check legal agreements to see if they allow embedding this font in your pages.
You could also try Shaun Inman's sIFR3, although CSS3 is likely to be the better alternative.
However, see license first. In many cases you can not use #font-face.
Here is post on adobe about myriad license for web.
http://forums.adobe.com/message/3654436
Related
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'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):
I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:
a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".
b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".
I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.
How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?
From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.
In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.
It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.
There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.
To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.
Check these links out if you wish to read more, hopefully they can be helpful:
Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?
How to do font antialiasing in web page?
Webfont Smoothing and Antialiasing in Firefox and Opera
http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
"The #font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, #font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The #font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
https://developer.mozilla.org/en-US/docs/CSS/#font-face
Its not a perfect solution, but it may get you closer to where you want to be.
We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.
On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.
When you're using a webfonts service you're at the mercy of how that service handles font embedding.
However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.
Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.
Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.
Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.
From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.
I used #font-face on my new site, it works fine in localhost in both FF and Chrome. However, when I upload it to my server, I can't see the fonts in FF or Chrome. What could be some possible causes?
My website is http://leojiang.me
While debugging your site you may want to have an easier to read css script to help find some of the problems. Compression should only be done when everything works the way you intend it to.
for now you can copy/paste it on this site to see it more clearly:
http://www.digitalcoding.com/tools/css-beautifier.html
I was a bit suspicious of the #media print and the later one for #page. I am not sure if those are set up properly. I would suggest concentrating on the website first by commenting out the print specifics to help you troubleshoot the web rendering problem. You may want to set up a test html page with all the various elements you wish to use and make sure they are working properly before incorporating the 3d shapes. Just make an html file and remove those classes so you can see how everything renders as a basic web page.
As Ettiene said, there are several spots where the code is setting the font for different elements to Lucida Grande and Courier. These locations are where you should be referencing your desired font name, ColThin. How you name them is important as well, check the file that was downloaded from font squirrel (if you got the font there). The html demo file that is included has some css which shows how to use the #font-face fonts:
p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;}
You are missing the quotation marks, so the css may not be registering the new font name. As well, setting it on html and having those other font names in the code afterwards replaces the html setting. The only name that is important is how you designate the #font-face name. You could designate it 'smashed-font' and if you reference it as 'smashed-font' it will reference the files you have designated as 'smashed-font'. 'ColThin' should be fine.
From what I can see, you have copied the font files into their correct place, but how you want to use them is not quite right.
Good use of Paul Hayes 3d experiment, BTW. http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
Bear in mind it may not work properly on several kinds of browsers, so have a fallback of some kind for people who are not fortunate enough to have webkit browsers, or include the alternatives such as -moz and -o and a version of the css which does not include -webkit, just in case these transformations make it into the css3 specifications.
If this is intimidating, consider it a learning experience. Polishing these mistakes through your own work will make your services that much more valuable to your potential clients.
Your font familly name may be wrong..
try this one
font-family: 'ColaborateThinRegular';
http://www.fontsquirrel.com/fontfacedemo/Colaborate
Look at the source code of the page.
Shad found the problem: "you have a rule body, button, input, select, textarea that is further down setting the font to sans serif".
Thanks!
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am searching for a list of fonts I can use in CSS. Since these fonts may be copyrighted, which fonts should I use that are available across Windows (as of XP), Mac OS X and, say, Ubuntu 8.04?
I don't want to rely solely on the newer OSs.
A great bonus would be if the same fonts existed on mobile devices.
See this list of browser safe fonts.
It's Windows+Mac centric, but still applies. They do include a linux distribution screenshot, as well.
Here's some required reading:
Safe Web Fonts
Common Fonts
Also some related questions on StackOverflow:
What is the most readable, appealing font?
Font (typeface) selection for the Web?
All about choosing the right font for a website
The only 100% safe way to declare fonts is to use generics as fall backs.
The generics are:
'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western) (wtf?)
'monospace' (e.g. Courier)
From the W3C
All five generic font families are
defined to exist in all CSS
implementations (they need not
necessarily map to five distinct
actual fonts). User agents should
provide reasonable default choices for
the generic font families, which
express the characteristics of each
family as well as possible within the
limits allowed by the underlying
technology.
Fonts such as Arial and Verdana which many web designers take for granted may not be present on Linux browsers (even firefox on centOS from experience). Apple has most of the Microsoft fonts but there are some which are absent.
Typetester!
Features:
compare fonts side by side;
choose from the list of safe fonts, win fonts or mac fonts;
all from the browser.
Just remember: Friends don't let friends use Comic Sans.
(Seriously, you've got good answers above already...).
Verdana is a good one.
CSS allows you to use any fonts installed on the system. font-family allows you to list many fonts. If the parser doesn't find the first one installed on the system, it moves onto the next one. That's why most font-family definitions cascade down to sans-serif or serif. If the browser doesn't have any of your fonts, it uses the default serif, sans-serif, or monospaced font, etc.
If you're a sucker for typography, unfortunately until CSS3 fonts take off you're going to have to live with serving up all the good fonts to your Mac users, since Mac OS X has a far greater selection of great fonts installed than Windows. I get a little depressed when I load up my sites on Windows and I'm greeted with a pile of rigid, aliased fonts.
Here's a guide...
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
As for mobile, all I can say is good luck! My daughter got my Blackberry from me for five minutes and changed my background, ringtone, and now all my fonts are cartoon fonts.
Here's a list of iPhone fonts, but it maybe slightly out-of-date. http://daringfireball.net/misc/2007/07/iphone-osx-fonts
You could use sIFR for headers and not worry about web-safe fonts at all. Take a look at the example page. It's pretty awesome.
Arial is my "safe" font that I use all the time.
But I've been using Trebuchet a lot lately. It's common enough that practically everybody is going to have it. It's used all over the place at StackOverflow, FeedBurner, and a lot of other popular sites these days.
But, just in case the user doesn't have it, I'd use CSS like this (just like StackOverflow has it)...
font-family:Trebuchet MS,Helvetica,sans-serif;
I'd recommend using web fonts if you desire layout consistency and complete control over the fonts rendered for your site. Here are some web font services to check out:
WebINK - No longer offered
Google Web Fonts
TypeKit
Fonts.com
All of these services provide thousands of high-quality fonts. Google fonts are totally free. WebINK and TypeKit both require a subscription model. I've never used fonts.com but they probably have a similar model.
Here's a nice article about typefaces for the web.
A lot of fonts are available from modern browsers. However, keep it simple and a little large. Also, use contrasting colors for easier reading.
While having such a list is certainly useful, you should also take advantage of the fallback mechanism of CSS. For example, you can list Consolas, Courier New, monospace in your font-family attribute and get the best possible match on that device.
The last item on each font-family list should be a neutral one such as "sans serif", "serif", "monospace", etc.
This way, your designers can use fonts they think best, as long as there's a reasonable downlevel experience.
See, for example w3.org's guidance
You're pretty save with Helvetica/Arial (yes, I know there's a difference!) or Verdana for sans-serif or Georgia or Times for serif. In your css you can just put a list in your preferred order. You should always end in a generic font-family to cover all your bases.
My sites usually look something like this:
font-family: Helvetica, Arial, sans-serif;
font-family: Georgia, serif;
If you want to get cute and fancy with your typography, you should look into SIFR, which uses flash to embed special fonts.
I have a fairly standards compliant XHTML+CSS site that looks great on all browsers on PC and Mac. The other day I saw it on FF3 on Linux and the letter spacing was slightly larger, throwing everything out of whack and causing unwanted wrapping and clipping of text. The CSS in question has
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
I know it's going with the generic sans-serif, whatever that maps to. If I add the following, the text scrunches up enough to be close to what I get on the other platforms:
letter-spacing: -1.5px;
but this would involve some nasty server-side OS sniffing. If there's a pure CSS solution to this I'd love to hear it.
The system in question is Ubuntu 7.04 but that is irrelevant as I'm looking to fix it for at least the majority of, if not all, Linux users. Of course asking the user to install a font is not an option!
A List Apart has a pretty comprehensive article on sizing fonts in CSS. Their conclusion is to use "ems" to size text, since it generally gives the most consistent sizing across browsers. They make no direct mention of different OSes, but you should try using ems. It might solve your problem.
Have you tried it in FF3 on windows?
Personally, I find a good CSS Reset goes a long way in making your page look the same in all browsers.
Sizing/spacing differences are usually difficult to catch. What you can do is create a Linux-specific CSS file that will contain these values adjusted for Linux, then do a simple JS-based detect to inject that CSS if the User agent is a Linux one.
This is probably not the cleanest approach, but it will work, and with the least intrusion into your otherwise clean HTML/CSS.
I find the easiest way to solve font sizing problems between browsers is to simply leave room for error. Make divs slightly larger or fonts slightly smaller so that platform variation doesn't change wrapping or clipping considerably.
Unless your site is expecting an above-normal amount of Linux-based traffic, you're probably going to adversely affect more people if you "sacrifice the user’s ability to adjust his or her reading environment" as opposed to just not caring about the Linux experience.
Having said that, if you do want a nice Linux experience, you should address the reasons behind why your design breaks under small variations in font spacing, given that these issues are difficult to control under current CSS implementations.