if i place my ttf font file in my websites root folder lets say named AMC.tff and in my website use <font face="AMC"> is it going to work... if not than what is the method to use unusual fonts in your website
You can include True Type Fonts with the help of the CSS 3 property #font-face. The following CSS would apply your AMC font to all <h1/> tags:
#font-face {
font-family: "AMC";
src: url("./AMC.ttf") format("truetype");
}
h1 {
font-family: "AMC", sans-serif;
}
For browsers that have no support for webfonts you should specify a similar alternative to your font. In the above example sans-serif would be used if AMC cannot be found because the #font-face tag was not recognized by the browser.
No, the fonts in a browser is based on fonts installed on the visitor's machine.
I don't know much about this area, so I can't tell you which one of these works or is considered best practices, but check out:
SiFr
typeface.js
Cufon
No. Apart from the fact that <font>is deprecated, you have to use the CSS3 #font-face directive, or older more compatible methods such as Cufon and Sifr.
If you need to use Custom Font for your site, you can give a go for Cufon
http://cufon.shoqolate.com/generate/
Detailed Tutorial for using CUfon on your site
http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/
Forgot to add, You can also use CSS3 property
#font-face
Supported by FF3.5 and above, Opera 10 and above, IE 7,8(not sure about 6)
Check this link out:
How to get non-standard font with effect in use of web site?
I have explained in detail how to embed fonts in a webpage and make it browser compatible.
Font embedding is also a risky affair, as the font license sometimes doesn't allow.
PS - And please make sure that you don't repeat questions in stackoverflow as this question has been answered many times.
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
I downloaded a font which I would like to use on a webpage. Of course this font isn't installed on the user's computer. How can I let a user's computer display that font? (I thought is was called: embedding a font but I could be wrong)
Thx for any help
VVW
You need to use #font-face.
A very easy way to generate the required cross-browser CSS and different formats of font file is to use:
http://www.fontsquirrel.com/fontface/generator
You simply upload your font and the generator does all the hard work.
If the users have a relatively new/up-to-date browser:
#font-face {
font-family: font-name
src: url(path/to/font.ttf);
}
element {
font-family: font-name;
}
First, we add the #font-face declaration wherein we specify the path, filename, and font-family name for our custom font. Then we add the font choice in a CSS rule to our...element.1
Citation:
A List Apart: Taking Advantage of HTML5 and CSS3 with Modernizr.
References:
#font-face, Mozilla Developer Center
CSS #ten, by Håkon Wium Lie
You are right that is called font-embedding. Here is what you need:
Embedding fonts in CSS
Newbie question: Can I embed any font into HTML. For example the Rockwell font?
Thanks!
Yes. Where FontFamilyName is what ever you want to call it and src: url('/font/font.otf'); is a link to the fonts file (much like using a background image).
#font-face {
font-family: FontFamilyName;
font-weight: bold;
src: url('/font/font.otf');
}
You can then use the font like any other font family. ex:
p
{
font-family: FontFamilyName;
}
Google offers a pretty nice service called Webfonts, check it out!
If you follow the bulletproof font-face syntax you can embed most any font into webpages.
You can use a free font-conversion service like font squirrel to convert your font's into the formats you need to support all browsers :)
take a look at #font-face that allows you to use any font on your page - if the user does not have that font installed, it can be downloaded from a server and used to render the web page.
An example
#font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
Take a look at font-face website for more details. Be aware that there are some cross browser issues with #font-face - for this, I would recommend looking at the stellar work of Paul Irish in this regard.
It is possible using #font-face in your stylesheet, but you have to remember that IE doesn't always handle these properly. Use this code:
#font-face {
font-family: (the name you want to call it by);
src: url('path/to/font.eof');
}
You can also use .otf, or .ttf.
Not really. You are limited to cross-browser fonts if you want to be sure the page will display the same across browsers.
That being said, there is an interesting service called Typekit that lets you embed fonts using JS and CSS3. It only works for modern browsers.
How do I load external font files into an HTML document.
Example:
Make the text "blah blah blah blah blah blah blah" a custom font from a TTF file in the same directory using HTML CSS and/or JAVASCRIPT
Take a look at this A List Apart article. The pertinent CSS is:
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
The above will work in Chrome/Safari/FireFox. As Paul D. Waite pointed out in the comments you can get it to work with IE if you convert the font to the EOT format.
The good news is that this seems to degrade gracefully in older browsers, so as long as you're aware and comfortable with the fact that not all users will see the same font, it's safe to use.
Paul Irish has a way to do this that covers most of the common problems. See his bullet-proof #font-face article:
The final variant, which stops unnecessary data from being downloaded by IE, and works in IE8, Firefox, Opera, Safari, and Chrome looks like this:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
He also links to a generator that will translate the fonts into all the formats you need.
As others have already specified, this will only work in the latest generation of browsers. Your best bet is to use this in conjunction with something like Cufon, and only load Cufon if the browser doesn't support #font-face.
CSS3 offers a way to do it with the #font-face rule.
http://www.w3.org/TR/css3-webfonts/#the-font-face-rule
http://www.css3.info/preview/web-fonts-with-font-face/
Here is a number of different ways which will work in browsers that don't support the #font-face rule.
Regarding Jay Stevens answer: "The fonts available to use in an HTML file have to be present on the user's machine and accessible from the web browser, so unless you want to distribute the fonts to the user's machine via a separate external process, it can't be done." That's true.
But there is another way using javascript / canvas / flash - very good solution gives cufon: http://cufon.shoqolate.com/generate/ library that generates a very easy to use external fonts methods.
If you want to support more browsers than the CSS3 fancy, you can look at the open source library cufon javascript library
And here is the API, if you want to do more funky stuff.
Major Pro: Allows you to do what you want / need.
Major Con: Disallows text selection in some browsers, so use is appropiate on header texts (but you can use it in all your site if you want)
Microsoft have a proprietary CSS method of including embedded fonts (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), but this probably shouldn't be recommended.
I've used sIFR before as this works great - it uses Javascript and Flash to dynamically replace normal text with some Flash containing the same text in the font you want (the font is embedded in a Flash file). This does not affect the markup around the text (it works by using a CSS class), you can still select the text, and if the user doesn't have Flash or has it disabled, it will degrade gracefully to the text in whatever font you specify in CSS (e.g. Arial).
Try this
<style>
#font-face {
font-family: Roboto Bold Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
#font-face {
font-family:Roboto Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}
div1{
font-family:Roboto Bold Condensed;
}
div2{
font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
I did not see any reference to Raphael.js. So I thought I'd include it here. Raphael.js is backwards compatible all the way back to IE5 and a very early Firefox as well as all of the rest of the browsers. It uses SVG when it can and VML when it can not. What you do with it is to draw onto a canvas. Some browsers will even let you select the text that is generated. Raphael.js can be found here:
http://raphaeljs.com/
It can be as simple as creating your paper drawing area, specifying the font, font-weight, size, etc... and then telling it to put your string of text onto the paper. I am not sure if it gets around the licensing issues or not but it is drawing the text so I'm fairly certain it does circumvent the licensing issues. But check with your lawyer to be sure. :-)
As an extra way, you can use Google Fonts CSS API. Try to find your font here.
It's very useful thing. Google Fonts has a big library of free fonts. You can request even single letters for optimization.
How to use a stylish font on my website that works on all browsers
"that works on all browsers"
I don't think there is such a thing as ANYTHING "that works on all browsers".
But your options would include (as stated above) sIFR, though you'd only want to use that for headlines, at most.
More recent browsers can support #font-face css "embedding" of fonts. Some online web services that will allow you to license type for that (either commercial or free fonts) and also make the CSS/JS needed include:
http://www.kernest.com
http://www.typekit.com
and there are others as well.
There's also Cufon, which is a javascript based solution.
Try sIFR. "Rich Accessible Typography for the Masses".
Edit: Also, check out cufon. (via later posts)
The only worthwile solution is sIFR.
You really should check out the #font-face CSS3 rule. Here's a converter to make it work in IE. Paul Irish has a great writeup on how to use the rule here.
[EDIT] Just found a handy generator, too: http://www.fontsquirrel.com/fontface/generator
Font embedding is becoming viable now. Check out this post from Jonathon Snook
Do you want to use if for headlines and other 'special' text or for general paragraphs of text? If the former, sIFR or an image representing the text would probably be best. If you want whole paragraphs then you should look into #font-face like DA suggested or see if there's an acceptable web safe font that is close enough to the font you would prefer to use.
I personally have switched from sIFR to cufon on projects that don't have issues with font EULAs. The about page has a more in depth overview.
Depends what font you want to use ... the easiest solution is to use the #font-face method. If you include the microsoft only format(.EOT) it will work in ANY browser.
Font Squirrel has a great collection of free to use commercially, font kits, that include:
Original TrueType or OpenType Fonts
for Firefox 3.5 and Safari
EOT fonts for Internet Explorer
SVG fonts for Opera, iPhone & Chrome
WOFF fonts for Firefox 3.6+
Demo.html and stylesheet.css so you
can get going fast
The #font-face method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.
It's totally SEO friendly and scalable.