Sorry for the long post, but you need some background info before my question since this is a strange setup and it's quite complex.
I have two fonts that's needs to be in a newletter.
First font, Cyclone, is in a format OTF.
The second, Albert, is format EOT and WOFF.
We have a system that send the newsletters for us, i only need to upload a html file to that system, that contains the structure, images and newsletter content, and upload images that needs to be in the newsletter.
After that i can preview it by sending it to my self.
First, i can't upload fonts or anything else to the newsletter
system besides images and html.
Second, i have uploaded both fonts, and the css to our webiste's media
folder(public folder) where we also load images to the website.
Third, i or anyone else, have no access to the .htaccess file, and we
will never get it, since the site is hosted somewhere, and to get
that fixed for cross-domain for newsletters is to big of a task for
such a small job.
In the newsletter i am loading the font like this:
#import url(xxx.com/media/fonts/albert.css);
and the CSS looks like this:
#font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}
have also tried this setup in the css:
#font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
And then use the font on the body:
body{
font-family: 'Albert', times new roman;
}
But doing this, i am getting this error/warning:
CORS-headeren 'Access-Control-Allow-Origin'
The funny thing is, when i used the Cyclone.otf font, it worked fine.
When i use the albert.eot or albert.woff, it's not working.
I then tried to convert the woff to otf, and use that, didn't work - same error/warning.
The setup might sounds strange, and is sure is, i have tried to draw how the setup is, so hope it makes a bit more sense.
Can anyone help me with this, what needs to be done without editing the .htaccess file. And why does Cyclone.otf work and not the others, even after converting them to otf?
Special fonts wont work in emails. You have to still use the basic web fonts like arial.
If it worked for you on one machine it may mean that you have that font installed. Try testing it on another machine and see what results you get. Also it can be worth testing your email code through a system like email on acid to see how it reacts and breaks to different email systems such as gmail or outlook.
Here is a guide to email fonts: http://templates.mailchimp.com/design/typography/
I m using one of the Font for my website i.e. "Aparajita". Which is not required to be available in every system through which my site is getting accessed.
My problem is it look's different when this font is installed on the browsing PC and some horrible when the same font is not getting installed.
How should i resolve this issue.
Should i install "Aparajita" Font on my hosting Server or what else...
Thanks in advance..
Make sure you have legal rights to the font.
Make the font available on your web server (i.e. put it in a directory from which it can be served in response to an HTTP request, the same way you would an image or stylesheet).
Reference it in your CSS using #font-face.
See: https://developer.mozilla.org/en-US/docs/CSS/#font-face
Font Squirrel has many free fonts and font-related tools. Google Fonts abstracts the whole process is makes it quite easy.
Now that you (hopefully) know what terms to search for, you can find many examples on SO of using custom fonts.
You can use CSS3 #font-face property for use custom font in your website and with the help of this your font will look same on all computers wheather they have insallted that font or not....
You can write like this :-
#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 */
}
Or Read More About how to use custom fonts for our websites.....
<font face="Your font_family">
Here it is for font style.
<FONT SIZE=7 COLOR=RED>word</FONT></U></B>
In my site i am using specific font with this code:
#font-face {
font-family: 'monotype';
src: url('/static_frontend/monotype.eot'); /* IE9 Compat Modes */
src: url('/static_frontend/monotype.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/static_frontend/monotype.woff') format('woff'), /* Modern Browsers */
url('/static_frontend/monotype.ttf') format('truetype'); /* Safari, Android, iOS */
}
When I open the site with www. the font not loads in firefox. In every other browsers everything is fine. In firefox font works only without www.
If anyone has encountered a similar problem please write.
Thanks in advance!
Consider using Google Fonts. If that's not viable enough for you, I encountered a similar issue a while back. It happened because the fonts were on a separate domain or subdomain than the original files.
Found the reason to be for this was because base URL was always set to without www. and the other style sheet was linked without www. as well, made path relative and it works just fine!
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers
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).