I designed a small template which uses Trebuchet MS font (PSD). Now, if I use this font in HTML/CSS it
looks quite different. Is there any possibility to achive the same or a better quality ?
Maybe Google Webfont ? Is there a simmilar font ? Or should I use CSS #font-face?
CSS:
font-family: "Trebuchet MS", sans serif;
Best regards
The basic answer is No.
You're talking about font anti-aliasing (or font smoothing). Photoshop gives anti-aliasing in four flavors (Sharp, Crisp, Strong, Smooth). Browsers don't do the same thing, generally the OS will control font anti-aliasing.
more on browsers and fonts: Type rendering: web browsers
No, unless you can use flash generated or image fonts, etc. You're looking at the differences in how two different beasts render fonts and it's mostly stuff outside your control.
#font-face is new and doesn't work in all browsers. In order to maintain cross browser support, you can use the JS based Cufon to deliver whatever font you want.
http://cufon.shoqolate.com/generate/
Related
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
Don't know if this is the right place to ask, but I am quite new to html, have made a complete site and uploaded to web server.
But i tried visiting the site on another device, and the font shows differently, but then when i go onto a website which has a different font it shows fine on their site.
Am i doing something wrong?
Cheers
Adam
Because the computer doesn't have that font, and you didn't include the font to download, just an instruction as to which one to use.
The CSS #fontface instruction lets you direct a browser to a file with a font.
A simpler and lighter approach, is to suggest back-ups. E.g. Instead of:
font-family: arial;
You could use:
font-family: arial, verdana, sans-serif;
The first will try to use Arial, and if it isn't available, will just use the default font for the browser (which could be a serif font like Times, for example).
The second will try to use Arial. If that's not available, it will try to use Verdana. If that's not available, it will try to use the default sans-serif font for the browser, which should at least be closer than a serif font.
Here is a great tutorial on how to create custom fonts on a website.
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
It will also explain which types of fonts are compatible on certain browsers
I am new to designing pages, and am starting off with basic HTML.
<font face="arial">Text</font>
I understand that the above displays Text in arial font face.
What are all the options that I have to put in place of arial? Is there a list or something for this?
First, start using instead of using <font> tag, use CSS (ie. font-family - Reference: CSS font-family Property)
Then you can look over Font Squirrel to see all sort of fonts that you can use and are easy to adapt with your site.
For full tutorial on CSS start doing this entire series of tutorials with CSS : CSS Tutorial
Also here is a list of safe web fonts: List of Web Safe Fonts
What are all the font faces that I can use?
You can choose what ever font face you like, but keep in mind that the browser will fall back on some other font if it does not have the particular font you're requesting to use.
The best thing you can do is to stick to some commonly available font faces. Here are a few good lists of such fonts:
list of safe fonts for use on a html webpage
HTML Font Face: Here is most common fonts
HTML Goodies Font List
Well now with google code you can do much more. Reade here: http://www.google.com/webfonts
below are the list of html "safe" font faces:
arial, arial black, comic sans ms,
courier, courier new, georgia,
helvetica, impact, palatino, times new
roman, trebuchet ms, verdana
Hope this helps
You should never use a element anymore, use CSS instead. Here's a list of the available font-families: http://www.w3.org/Style/Examples/007/fonts
I'd recommend that you use sans-serif instead of Arial.
Its a best of both worlds for mac (causes Helvetica to be displayed) and windows (causes Arial).
Furthermore check out http://www.google.com/webfonts if you want to embed some open-source sexy fonts
As has already been pointed out, you'd be best reconsidering use of the font tag and looking into using CSS (specifically the font-family and related rules, especially font stacking).
As far as what is commonly cited as "web safe" goes, it all depends what fonts are available on your users' computers, as these are the fonts that their browser will work with.
Also look into the CSS #font-face directive, and its usefulness with services like Google webfonts, Typekit, Font Deck and similar. It opens a whole other set of possibilities.
EDIT to remove broken link.
Can I use "Arial Rounded MT Bold" with css ?
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
Nothing Changed when I put :
font-family:Arial, Helvetica, sans-serif;
Google Fonts has Nunito, by Vernon Adams:
http://www.google.com/webfonts/family?family=Nunito
It's nice and rounded; sort of reminds me of what they're using on Glitch.
It's hard to know without more information from the OP but I've seen these same symptoms caused by the hardware acceleration feature in Firefox. It's been know to cause several problems with font rendering. One I've observed is failing to render a non-standard font (such as "Arial MT Rounded Bold") despite it being present on the client machine.
For example, this page...
<html>
<head>
<style type="text/css">
body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
</style>
</head>
<body>
This can be really annoying.
</body>
</html>
When viewed in IE, Chrome or FF with hardware acceleration turned off the font appears correctly, like this...
But when viewed in FF with hardware acceleration enabled the browser fails to "find" the specified font so it defaults to another, like this...
There have been issues with this "feature" of FF since version 4.
Probably the best solution is to either use a different (standard) font or (as Kent suggests) find a similar web font that will work in all modern browsers. Alternatively, like many font issues, the problem can be mitigated by supplying a list of font families to use as fall-backs.
I've seen an alternative Google Font suggested here from back in 2011 which is a pretty good match but there are some thin parts to the font which aren't the same as the Arial Rounded MT Bold.
For people still looking for an alternative I think this one is a better match; its called Varela Round by Joe Prince:
Varela Round
I would also set it in font-weight: bold; for a more accurate match.
To use custom fonts with good cross browser compatibility, take a look at FontSquirrel. They will generate the correct CSS to get custom fonts working cross browser. Take a look around their site for Rounded MT Bold or whatever else you want :-) Also, if you want more fonts, take a look at http://www.fontex.org/
Google Fonts is also a possibility. There are a lot of different fonts but I don't know whether there's exactly Arial Rounded MT Bold.
You can use only fonts which are installed at the clients computer!! So just mentioning them in the css font-family doesn't work if the font is not installed. For this, Google Fonts and others bring the functionality... so everytime you use a font that is not "Times", "Arial" or "Verdana", which are installed on nearly every computer, you should think about an alternative to raw css
There's a good chance that — if nothing changed (on your local browser's rendering of the webpage) when you changed the font stack — that you don't actually have Arial MT Rounded Bold installed on your computer. One way to test this is to use Firebug, to 'inspect element' for the headline (or whatever the font is applied to), and to edit the font-family listing in the right-hand Firebug pane. (Usually, I just find the named font and add a space into the name of it, which "breaks" the call to the proper font, and the browser then moves on to the next font in the stack.)
Other options include using Google's web-font Nunito (as Kent Brewster recommended a few minutes ago), or setting up a font-face font on your own server, providing one of the rounded fonts (RockoFLF Bold, FF Din Rounded, Nunito, and Arial MT Rounded Bold are all options). (Technically, per Kent's comment, Glitch is using RockoFLF, with Arial MT Rounded Bold as the second font in the stack. At least, that's what they were doing a few months ago when I last looked at their code. ... Oh ... just checked again, and they've dropped the Arial MT Rounded Bold out of the stack. They're calling RockoFLF with an embedded font-face.)
Anyway, as Kent Brewster noted, I think your best bet is to use Google Web Fonts' 'Nunito', if you aren't sure that it'll be on your users' computers (or even your own).
It may not appear because of system compatibility - you can check out Arial Rounded MT Bold on CSS Font Stack for compatibility. There's a 59.53% on Windows and 95.14% on Mac. https://www.cssfontstack.com/Arial-Rounded-MT-Bold
Its worth noting that Linux doesn't come with Arial by default so one should not rely on a font being present on a users computer. Instead they should download the files (license permitting), host them on their site and link to them using #font-face.
is there any standard choice of the font family and font size for a general web site .. or something of that kind which are normally used...
Not really, although you'll get a good feel for what is generally used if you spent some time on the internet.
There is always a problem (when using fonts online) that your user may not have the font. This is why the font-family lets you provide multiple fonts. Here is a helpful list of fonts that exist on Windows and Mac OS. As of CSS3 we have #font-face which lets us use fonts that we provide.
Well, there is no standard for fonts at all, except for the generic fonts defined in CSS.
Helvetica is a font that is available on most systems. Use the generic font sans-serif as fallback. Arial is the Microsoft equivalent of Helvetica.
The size is a little tricker as it can vary somewhat between implementations of a font, but 14px normally gives you the same size as this text.
body { font-family: Arial, Helvetica, sans-serif; font-size 14px; }
Well there is no general guideline on which font to use on a website it is always best to use web friendly fonts which are defined on WikiPedia as
Web-safe fonts are fonts likely to be
present on a wide range of computer
systems, and used by web content
authors to increase the likelihood
that content will be displayed in
their chosen font. If a visitor to a
website does not have the specified
font, their browser will attempt to
select a similar alternative, based on
the author-specified fallback fonts
and generic families.
You will find more here
link text