I feel like a muppet for asking this but how can i get Futura Condensed Extra Bold to show up in CSS.
Before someone says it, yes I am aware that those Windows people out there wont be able to see it but this is for the Mac community, anyway at this stage i can't even see it and I have the font installed on my system.
So I have tried so many variations of this phrase but none work. I've tried with and without quotes, spaces, dashes, all sorts but it's still not working.
font-family: "Futura-CondensedExtraBold", sans-serif;
Here is a screenshot of the installed font, as you can see the name i used matches the PostScript name too.
Screenshot of Font Book
Most people who are using Futura on the web are loading through services like Typekit. So if you are seeing this typeface frequently on sites you like it is for this reason. I recommend trying that service or one similar so everyone can see it. I believe there is a free personal one and it is just a script install. Then your
font-family: "Futura-CondensedExtraBold", sans-serif;
would work. Just check what Typekit uses to load this. I believe there's would be
font-family: "futura-pt-condensed", sans-serif; font-weight: 600;
https://typekit.com/fonts/futura-pt-condensed
Probably the name is not the one under which browsers know it. This may differ from the PostScript name. Try using a tool for listing installed fonts (see its explanations) to determine the name. My guess is that it might be "Futura Condensed ExtraBold".
Font names are also notoriously inconsistent, so that might be one problem. Have you tried #font-face? It's a more reliable way of referencing non-standard fonts. Head on over to http://www.fontsquirrel.com/fontface/generator
You'll need an OTF or TTF of your font. It'll do the rest for you and zip up a demo and the converted fonts.
Had a similar issue myself. In Firefox you may need to use just "Futura" with font-stretch and font-weight properties. Webkit/Blink recognize the hyphenated font. This has worked for me cross browser on a Mac:
font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
font-stretch: condensed;
font-weight: bold;
Email web clients strip out css, so do test it.
Aside from the iconic Futura Condensed Extra Bold, they also use Trade Gothic Condensed Bold on headings at nike.com
Related
I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.
Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:
font: 100%/1.6 "Font name here";
color: #bbb;
font-weight: 400; (for example)
Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).
Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!
For reference I am using the following reset:
html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}
Edit: #Fontface code that I've used, that does seem to look the same!
#font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf')
format('truetype');
}
(just picked this font as an example)
I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides.
The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:
For this:
http://fonts.googleapis.com/css?family=Open+Sans
you get this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.
That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.
I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.
This is potentially a duplicate of this question but this was my answer to that:
Fonts render differently based on:
Screen/Monitor resolution
Browser
Operating System
Size of use and hinting
Without seeing your code the only things I can recommend are:
Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).
Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.
Assuring you are using the actual versions of the fonts and not just applying CSS styles.
If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.
Some people also recommend not using the #import or direct link from google. Perhaps try downloading the file and using #font-face in your css.
Hope this helps!
EDIT:
If you’re hosting the font yourself — double check the #font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.
There is a font called "Futura", it works on all macs, even iPhones, but not on PCs. So on my web hosting, I have a css file called styles.css. At the top, I have :
#font-face {
font-family: 'Futura';
src: url("Futura.eot");
/* FOR IEs */
src: local('Futura'), url('Futura.ttf') format('truetype');
/* for other web browsers */
}
and in the same place as styles.css I have futura.ttf, and futura.eot. I got them both from a website, so I don't know if those two files are broken or not.
But all fonts still shows as Times New Roman on PC.
1) Make sure that the font-family value degrades gracefully:
font-family: 'Futura', Arial, sans-serif;
2) If you're hosting a copy of the font, make sure that it's on your server and the URL is pointing to it correctly. That said, if you just downloaded the font and are hoping to use it on your website, there are better ways to do this. You're going to want a web-optimized one that only includes the character sets and weights that you actually need. Otherwise, you're forcing every visitor to your site to download 200k worth of font -- no bueno. A good option would be TypeKit (http://typekit.com), which does have Futura PT.
If you're not looking to pay, the Google Web Font Repository is another fantastic resource. You won't be able to find Futura, but they have plenty of other options.
The Futura font is copyrighted, and you can legally use it as a web font only if you have made an agreement with the font vendor, directly or indirectly. See Linotype page on Futura. Contact the font vendor regarding problems in use, after double-checking that you are using the font according to the instructions.
If you find the cost excessive, consider trying to find a suitable free font that is sufficiently similar or otherwise meets your needs. There are some nice sans-serif fonts, with several typefaces, among Google Web Fonts.
This would probably be safer:
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
via http://cssfontstack.com/
Also, you might be safer using a typekit so you can ensure it will show up correctly on any OS or browser. For example: https://typekit.com/fonts/futura-pt
Google's WebFont Loader allows you to pull from various web fonts.
The WebFont Loader is a JavaScript library that gives you more control
over font loading than the Google Web Fonts API provides. The WebFont
Loader also lets you use multiple web-font providers. It was
co-developed by Google and Typekit.
You should also make sure you are using the correct font name. You might have a variant on your PC. For example: Futura Book BT, Futura Lt, Futura Md, Futura Bk, Futura Hv, etc.
Let me give you some examples:
Firefox 13:
Chrome (latest):
As you can see, in Firefox the font appears smoother, and in Chrome choppier. I'm curious as to why this is happening and steps I can take to even out the experience for my users.
I'm using an .otf font:
HelveticaNeueLTPro-LtCn.otf
And using the following CSS rules to apply this custom font:
#font-face {
font-family: "Helvetica Neue LTPro";
src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
}
a {
color: #665548;
display: block;
font-family: "Helvetica Neue LTPro";
font-size: 15px;
padding: 17px;
}
What do you recommend I use to even out the font differences? Or better yet, what's a good practice way to use "Web safe" fonts? Does such a thing exist?
Unfortunately you can't just take any font, convert it and have it work well in all browsers. I'd love it if you could but you can't.
Your best bet for getting good results is to use a font delivery service such as typekit or fontdeck that provide fonts that have been designed for delivery across browsers and so have a better chance of rendering consistently. You're still likely to get small variations across browsers and operating systems though, that's the nature of the web.
But in answer to your question specifically, there are no settings or workarounds to make that font appear consistently. For what it's worth I think they both look fine.
That's just depending on how a browser interprets the font. I've never actually used it, but there's a site called fontsquirrel that will take a font and break it up into different font extensions to be used for different browsers. Check it out. http://www.fontsquirrel.com/
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
I'm developing a website for someone but they want (insist) that the title be in a non-standard font. (The customer is always right.) I have the TrueType (.ttf) font but how do I bundle this with the website so that it uses it?
I tried putting it in the Images folder and tried to access it with the style sheet:
font-family:URL(Images/Arial_Rounded_MT_Bold.ttf)
But that didn't work. How do I include a non-standard font in a way which will render?
In case it's useful, this is an ASP.NET 2.0 site.
There is currently no standard way to do this. You could use #font-face, but it's not supported in all browsers. As Lance mentioned, this is a great place to find a support reference for the major browsers.
There is an effort to standardize this type of thing. The Web Open Font Format (WOFF) is such an effort. It looks like this may even be adopted by the major browsers in the future. We will have to wait and see.
For now, the best you can do is to reference your font like you normally would, but add a default (standard) font after that.
font-family: "Arial Rounded MT Bold", "Times New Roman", Serif
You have two options:
Create an image instead of using text
Use sifr to convert your text to the .ttf font
You have lots of options, none of them perfect. Smashing Magazine has a great article about rich fonts - most of them involve flash / image replacement.
http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/
Convert your TrueType font into an Embedded OpenType font (it's easy!) so that you have two font files:
Arial_Rounded_MT_Bold.ttf
Arial_Rounded_MT_Bold.eot
Then make your CSS look like this:
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.eot');
}
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.ttf') format('truetype');
}
h1.title {
font-family: 'Arial Rounded Bold', serif;
}
Thanks to Internet Explorer, the EOT specification needs to be first, in a separate #font-face block and without the format attribute. More info here.
Enjoy!
There is a fair amount of activity on the subject of distributing fonts along with websites, but it's generally in the experimental stage, and won't work for the vast majority of browsers in use. In a few years you may be able to do this, but for the moment you would have to use an image or sIFR.