I am trying to use "HelveticaNeueLTStd25UltraLight" on my website. On OSX, it looks perfect in every browser. On Windows, it's horrible:
Chrome:
IE:
I am using the following CSS (if it matters):
#font-face {
font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.ttf');
}
body{font-family:'HelveticaNeueLTStd25UltraLight'; font-weight:normal;}
/*** IE FONT ***/
#font-face {font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot');
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot') format('embedded-opentype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.woff') format('woff'),
url('../fonts/HelveticaNeueLTStd25UltraLight.ttf') format('truetype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.svg#HelveticaNeueLTStd25UltraLight') format('svg');
font-weight: normal;
font-style: normal;}
Can someone explain why this is? What can I do about it? If I must use another font, which fonts are safe to use?
Windows just has crappier font rendering in browsers than OSX or iOS does. Sometimes you can fix it by picking specific font sizes at which the browser antialiasing doesn't look too awful. There is also the text-rendering: optimizeLegibility CSS property but in my experience it often does more harm than good.
Pick a different font that is more optimized for web display. Google Web Fonts is a good place to start. They have lots of great modern fonts that are all optimized to be used as webfonts, and on top of that they provide the CSS etc - you just need to <link> to their external CDN CSS file in your <head> and bam you're good to go. "Lato" and "Raleway" are fonts I use in place of Helvetica Neue sometimes.
Also, it's almost certainly illegal to embed that font anyway since Helvetica Neue LT Std is a commercial font, so...
Every browser renders fonts differently using different methods that is why you are including so many different versions of the font, as each is used by a different browsers. OSX has one of the best font rendering engines, things look great, but look at in IE or FF or Chrome and things tend to be different. There isn't much you can do apart from trying a font that is a bit thicker.
You can see maybe if maybe font-weight: 500 helps.
Related
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
I am trying to use custom fonts on my website and in the css I have the following code:
#font-face {
font-family: 'Sketch';
src: url('../fonts/Sketch.eot');
src: url('../fonts/Sketch.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
ul#holder {font-family:'Sketch'}
The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)
In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?
Different browsers supports different font formats:
So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).
And then, you can import them like that:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.
And, anyway, their appearance may differ a little in different browsers.
All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...
Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:
#font-face {
font-family: 'Sketch';
src: url('../fonts/SketchRockwell.eot');
src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
url('../fonts/SketchRockwell.woff') format('woff'),
url('../fonts/SketchRockwell.ttf') format('truetype'),
url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The above came from Font Squirrel’s #font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts
Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.
Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these #font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.
Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,
Here is a great URL for creating embeddable font packs:
http://fontface.codeandmore.com/
Upload your TTF or OTF font and it creates the entire font kit for you, complete with
implementation HTML and CSS examples.
Cheers!
Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.
If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.
I have a webfont that uses css #face-face, is there a problems with this use of font that is not a "standard" font like Arial or Tahoma? is this method is 100% cross browser support ?
Yhe code looks like that:
font-family: 'myfont_OERegular';
src: url('myfont-webfont.eot');
src: local('myfont_OE'), local('myfont1'), url('myfont_-webfont.woff') format('woff'), url('meodedpashut_myfont-webfont.svg#webfont4Amd3DHq') format('svg');
font-weight: normal;
font-style: normal;
There is never a "100%" cross-browser method for anything. Furthermore, loading fonts for a website like this is even more unreliable. This generally isn't an issue, as long as you are happy with 95-97% of your browsers looking "correct". But there are undoubtedly exceptions.
If you must have a specific font for certain content (such as headings), then the best you can do is load an image. But then, you must take precautions for those that don't load images, are blind, or are search engines.
Finally, make sure you have a license if you are distributing a font.
the support for font face is really good
look: http://www.findmebyip.com/litmus/
and i am using also fontsquirrel and kernest and it works every where, where i tested it (modenr browsers, not too old browsers like ie 5.5, ...)
How come the font FixedSys and Terminal ONLY work on FireFox and not on any other major browser?
What's the deal? Is it because they are system fonts or am I missing something?
Thanks
I know this is old, but I converted http://www.fixedsysexcelsior.com/ to a Webfont a while back.. the files are here:
http://jollo.org/archive/doir/fixedsys
css usage is:
#font-face {
font-family: 'FixedsysExcelsior301Regular';
src: url('fsex300-webfont.eot');
src: url('fsex300-webfont.eot?#iefix') format('embedded-opentype'),
url('fsex300-webfont.woff') format('woff'),
url('fsex300-webfont.ttf') format('truetype'),
url('fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing:aliased;
font-smooth:never;
}
Firefox does have a little bit of trouble rendering it in some instances.. but this appears to be a bug with many webfonts (fonts appear blurry when the browser is a certain size, normal when another size.
How come the font FixedSys and
Terminal ONLY work on FireFox and not
on any other major browser?
What's the deal? Is it because they
are system fonts or am I missing
something?
The fonts do not depend on browser, they should be applied if they are present on the client machine. If you can view it in FF, they should be viewable in other browsers as well. The FixedSys font is shipped with Windows and is available (Not sure about other OS). Make sure that you can differentiate it or there could be some other problem. Using reset CSS may also help.
Those fonts aren't available everywhere (for example Linux). If you want to display monospaced text, use monospace as fallback. It defaults to the standard monospace font of the system.
Is there a way to add some custom font on a website without using images, Flash or some other graphics?
For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can't find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?
This could be done via CSS:
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).
You can add some fonts via Google Web Fonts.
Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with #font-face (read about it).
For example:
In the <head> section:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Then in CSS:
h1 { font-family: 'Droid Sans', arial, serif; }
The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.
The way to go is using the #font-face CSS declaration which 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.
Take a look at the following table:
As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn't much different.
Solutions:
1 - Full browser compatibility
This is the method with the deepest support possible right now:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - Most of the browser
Things are shifting heavily toward WOFF though, so you can probably get away with:
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Only the latest browsers
Or even just WOFF.
You then use it like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
References and Further reading:
That's mainly what you need to know about implementing this feature. If you want to research more on the subject I'll encourage to take a look at the following resources. Most of what I put here is extracted from the following
Using Font Face (Very recommended)
Bulletproof #font-face syntax
Can i use #font-face web fonts ?
How to archive Cross-Browser #font-face support
#font-face at the CSS Mozilla Developer Network
If by non standard font, you mean custom font of a standard format, here's how I do it, and it works for all browsers I've checked so far:
#font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
#font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
so you'll just need both the ttf and eot fonts. Some tools available online can make the conversion.
But if you want to attach font in a non standard format (bitmaps etc), I can't help you.
I've found that the easiest way to have non-standard fonts on a website is to use sIFR
It does involve the use of a Flash object that contains the font, but it degrades nicely to standard text / font if Flash is not installed.
The style is set in your CSS, and JavaScript sets up the Flash replacement for your text.
Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).
The article Font-face in IE: Making Web Fonts Work says it works with all three major browsers.
Here is a sample I got working: http://brendanjerwin.com/test_font.html
More discussion is in Embedding Fonts.
Typeface.js and Cufon are two other interesting options. They are JavaScript components that render special font data in JSON format (which you can convert from TrueType or OpenType formats on their web sites) via the new <canvas> element in all newer browsers except Internet Explorer and via VML in Internet Explorer.
The main problem with both (as of now) is that selecting text does not work or at least works only quite awkwardly.
Still, it is very nice for headlines. Body text... I don't know.
And it's surprisingly fast.
Or you could try sIFR. I know it uses Flash, but only if available. If Flash isn't available, it displays the original text in its original (CSS) font.
The technique that the W3C has recommended for do this is called "embedding" and is well described by the three articles here: Embedding Fonts. In my limited experiments, I have found this process error-prone and have had limited success in making it function in a multi-browser environment.
Safari and Internet Explorer both support the CSS #font-face rule, however they support two different embedded font types. Firefox is planning to support the same type as Apple some time soon. SVG can embed fonts but isn't that widely supported yet (without a plugin).
I think the most portable solution I've seen is to use a JavaScript function to replace headings etc. with an image generated and cached on the server with your font of choice -- that way you simply update the text and don't have to stuff around in Photoshop.
If you use ASP.NET, it's really easy to generate image based fonts without actually having to install (as in adding to the installed font base) fonts on the server by using:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
and then drawing with that font onto a Graphics.
It looks like it only works in Internet Explorer, but a quick Google search for "html embed fonts" yields http://www.spoono.com/html/tutorials/tutorial.php?id=19
If you want to stay platform-agnostic (and you should!) you'll have to use images, or else just use a standard font.
I did a bit of research and dug up Dynamic Text Replacement (published 2004-06-15).
This technique uses images, but it appears to be "hands free". You write your text, and you let a few automated scripts do automated find-and-replace on the page for you on the fly.
It has some limitations, but it is probably one of the easier choices (and more browser compatible) than all the rest I've seen.
It is also possible to use WOFF fonts - example here
#font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
Just simply provide the link to actual font like this and you will be good to go
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
Typeface.js JavaScript Way:
With typeface.js you can embed custom
fonts in your web pages so you don't
have to render text to images
Instead of creating images or using
flash just to show your site's graphic
text in the font you want, you can use
typeface.js and write in plain HTML
and CSS, just as if your visitors had
the font installed locally.
http://typeface.neocracy.org/
See the article 50 Useful Design Tools For Beautiful Web Typography for alternative methods.
I have only used Cufon. I have found it reliable and very easy to use, so I've stuck with it.
If you have a file of your font, then you will need to add more formats of that font for other browsers.
For this purpose I use font generator like Fontsquirrel it provides all the font formats & its #font-face CSS, you will only need to just drag & drop it into your CSS file.
#font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}
easy solution is to use #fontface in css
#font-face {
font-family: myFirstFont;
src: url(fileLocation);}
div{
font-family: myfirstfont;}
You can use #import url(url) to import web fonts. You must replace url with the font source (full web source).