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 am using Open Sans and Open Sans Light font in my site.
And below is the googleapis font link which I am rendering from google fonts.
I want to use Open Sans Light and Open Sans font in some of the text.
If i choose open sans 300,400,600.
and use font name in the class and add font-weight:300 for light and 400 for regular
it doesn't work for ie7 and 8. It shows the big font on ie 7.
but by using font-weight related to the font styling works fine for other browsers.
Need help to fix this for ie7 and 8.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
With Google fonts you won't be able to solve this problem.
The problem is that IE7/8 understands only
font-weight:700 which it interprets as equivalent of font-weight:bold
and
font-weight:400 which it interprets as equivalent of font-weight:normal.
A solution to this is to serve a separate font file to IE7/8 which contains the desired font face weight - google fonts foes not offer this kind of fallback - but it is very nicely solved with Typekit, which than let's you use this kind of crossbrowser font face rule:
font-family: "proxima-nova-n6", "proxima-nova", sans-serif;
font-weight: 600;
The first declaration - "proxima-nova-n6" - provides a fallback for IE7/8 for a weight of 600.
If you want to solve this without paying for a service, you will have to create separate font files containing different font width - upload them to fontsquirell and generate the complete set of formats needed to cover all the browsers. Take care with licenses - not all font's are free to embed on web.
I'm trying to make my webpage use the font Segoe Print, which is not a default browser font. I have the ttf file though, is there any way I can employ this .ttf file so that every visitor (no matter what browser) can see the font ?
I searched and found some solutions, one was saying "Convert the font using this site"
but it gives the error:
Microsoft has requested that their font Segoe Print to be blacklisted
by the generator
So how can I use this font on my website ?
I also found a solution that suggests the following CSS rule :
#font-face
{
font-family: myFirstFont;
src: url('Segoe.ttf'),
url('Segoe.eot'); /* IE9 */
}
But, will it work in non-windows browsers? I mean, does the user have to have the ttf file in their computer, or will it be loaded from my website ?
Thanks !
You cannot, in any legal and morally acceptable way. It would be illegal and morally wrong to give advice on committing the crime that such unauthorized use would constitute.
You should thus either abandon the idea or try and find a free font, or a font that may be legally used for a fee, with characteristics sufficiently similar to the font that you want to use.
You can use Kirsle to convert your TTF font to EOT. Then you need to import three format of your font in the top of your CSS, with this format:
#font-face {
font-family: 'Segoe’;
src:url('fonts/Segoe.eot?#’) format(‘eot’),
url(‘fonts/Segoe.woff’) format(‘woff’);
url(‘fonts/Segoe.ttf’) format(‘truetype’);
}
Remeber to have the ?#, it will deceive the IE to only see the first line and download it, as other browsers can't see the first line and will download the TTF format & New browsers will download the WOFF that have a less size, so will download faster.
Simply use font-family: Segoe to change an item's font in your CSS.
Why not buy it? There are reputable sources where you can purchase a license to use this font as a web font.
I'm curious if anyone has an idea about how this stuff works behind the scenes. I'm interested if there is a way to host your own fonts and also if those would work for all major browsers out there?
Found this interesting post on Typekit's blog. This was the kind of answer that I was looking for.
Edit: I wrote a web font server which borrows some of the techniques described in the article.
I suggest looking up WOFF (Web Open Font Format). There should be various applications (at least one free web app) available for converting regular desktop fonts to WOFF.
The only real obstacle to embedding any font you want are licensing restrictions, and that is what Typekit was created to solve. They provide a means to legally embed web fonts that they've obtained licensing rights for from type foundries—hence the subscription cost.
You can do as Aillyn suggest if you can find free fonts that don't have such licensing restrictions, or you can acquire WOFF fonts that are licensed specifically for web use, and which are also compressed for faster loading. Alternately, you can convert your TrueType/OpenType fonts into WOFF and use any font you want, regardless of legality.
However, the way Typekit embeds fonts is by embedding them directly in the CSS:
#font-face {
font-family: "bello-pro-1";
src: url(data:font/woff;base64,...=);
font-style: normal;
font-weight: 400;
}
—where ... is the WOFF file encoded in Base64. You can also do this yourself once you've acquired a WOFF font.
There's no innate DRM in WOFF, so I'm not sure what has prompted font foundries to suddenly embrace web fonts through WOFF, but from what I've read from a few font designers, it appears that there might be some fundamental misunderstanding of how web pages work and what the "same-origin" policy actually implies.
I imagine they are just embedding fonts like this:
#font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;
}
http://randsco.com/index.php/2009/07/04/p680
I tested that and it works for IE8, FF, Chrome and Safari on Windows.
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).