I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
Related
I'm trying to build a web page and need some kind of fairly distinct cursive font (not too crazy, but still distinguishable from standard print). However, when I look at this page in Firefox: https://www.w3.org/Style/Examples/007/fonts.en.html
My browser renders all of them in an approximately standard font--none of them look nearly cursive enough. Since this is just an out-of-the-box installation of Firefox, I imagine this is how it will render on most users' screen if they're using the same.
Is there any way to force render a more cursive font for someone using standard Firefox?
As was mentioned earlier, the font in that example varies depending on device, not browser.
When you set a non-specific font-family in your stylesheets, e.g. font-family:sans-serif; or font-family:cursive; what font that actually gets used will depend entirely on that visitors operating system and what fonts are installed there.
In that link it shows you various system fonts that may or may not be installed, with system defaults as a fallback, with a picture next to each showing what it should look like if your system has that font. This will differ from person to person. It gets quite complicated when you consider that sometimes the fallback fonts can even vary between OS versions.
So for more complete control, many developers turn to webfonts. I use a lot of Google fonts for my websites; https://fonts.google.com/
There are different ways of using a webfont, but I find this way simplest;
/*put imports at the top of your stylesheet*/
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h2 {font-family:"Lobster", cursive;}
<h2>I'm A Webfont</h2>
I'm beginner in HTML.
In browser not supported the all kind of fonts. Like old version of the mozila not supported the some kind of fonts. what are the fonts are supported in all kinds of browser.
I know in this case uses the font-family. For example I used the font family is:
{
font-family:cambria,Helvetica,monospace;
}
I create the pages and visual effect is done in my browser. In my browser support the first font is the cambria. Perhaps i display the page in the other system which support the Helvetica fonts.
My problem is I design the page for cambria fonts like font-size , line-height and etc
But in other system it will changes for Helvetica font family, so i don't get what i expect.
How can i manage the this kind of problem and what are fonts are supported in all kind of browser include the very old version browser also.?
#font-face CSS will bring in fonts for you have a look Google Fonts
#font-face {
font-family: TheFontName;
src: url(www.googletheFont.woff);
}
use generic fonts that work in all browsers/os like times, open sans etc.
or better use solutions like webfonts, font-face, google fonts, adobe typekit for custom fonts
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I choose for my website the following font:
http://fontscore.com/fonts/Helvetica-Neue-LT-Std-35-Thin_22514.html
On a Mac this font looks awesome while on Windows it looks horrible. Here's the screenshots:
I tried to convert the font using a fontgenerator; I also add this stuff:
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
Still the same result. I know that windows use Cleartype and treat fonts in different manner with respect to a Mac but is it possible to solve this?
EDIT:
Here's my font face rule:
#font-face {
font-family: 'Thin';
src: url('fonts/helvetica-neue-lt.eot');
src: url('fonts/helvetica-neue-lt.eot') format('embedded-opentype'),
url('fonts/helvetica-neue-lt.woff') format('woff'),
url('fonts/helvetica-neue-lt.ttf') format('truetype'),
url('fonts/helvetica-neue-lt.svg#Thin') format('svg');
}
HelveticaNeue is a Mac system font, and the exact version that Apple uses is not available on PC (as far as I know). I usually add 'Arial' to the font-family style, and it displays fine on a PC.
I would suggest using http://www.google.com/fonts/
Arimo is a compatible font for helevetica neue
easy to implement and compatible across all platforms
HelveticaNeue is an Apple system font. I don't believe there is a PC equivalent, asside Helvetica, witch is not the same, but a close looking one.
We had this situation too, especialy after trying to work with zurbFondation. We tried to debug, even wrote to mozilla ..
My best solution to your problem : don't use helvetica neue and stop your designers from using them like those who know not much about rendering engines.
Just don't use it. If you really really need explanations about 'why not use it' do like us, spend about 6 hours testing cross-plateform, cross-browsers .. and another 4 hours arguing with technical director and designers.
Yeah, this answer is not much of 'scientific' buy AYE! believe me, it's bad.
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+pc+firefox+problem
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+pc+problem
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+problem
Have a look at this article from typekit: CSS properties that affect type rendering .
Quoted from this article:
When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks.
It's from 2011, but it covers some interesting things about font rendering which are still useful.
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.