Web Fonts
-
- Moderator
- Posts: 11202
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Web Fonts
Technologies that allow custom fonts (to some extent) in web pages:
Scalable Inman Flash Replacement (sIFR)
http://www.mikeindustries.com/blog/sifr/
Requires both JavaScript and Flash
Flash is used to display the font
Supported by all major web browsers
typeface.js
http://typeface.neocracy.org/
JavaScript has to be enabled
One or more images are generated in the web browser
Supported by all major web browsers
True Font Family
http://www.truefontfamily.com/
JavaScript has to be enabled
An image is generated on the server
Supported by all major web browsers
@font-face rule
http://www.w3.org/TR/CSS2/fonts.html#font-descriptions
More and more web browsers support it; see below
Web Fonts and Web Browsers
Internet Explorer (since version 4)
Only supported on Windows
Web Embedding Fonts Tool (WEFT)
http://www.microsoft.com/typography/web/embedding/
Netscape Navigator (version 4 and 5)
Netscape had it's own solution (TrueDoc from Bitstream) but discontinued it.
Safari (since version 3.1)
Cascading Style Sheets level 3 (CSS3)
Through the @font-face rule (downloads fonts to the client)
Opera (soon)
Opera will soon reveal it's improved support for web fonts. I don't know the details, but this article might be very related:
http://www.alistapart.com/articles/cssatten
Mozilla Firefox (to be expected in version 3.1)
https://bugzilla.mozilla.org/show_bug.cgi?id=70132
Intellectual Property
There are numerous discussions about IP, here are a few:
Fonts and the Law
http://www.fontembedding.com/fonts-and-the-law/
Other Resources
Web Fonts: User Survey Results
http://blogs.adobe.com/typblography/200 ... sults.html
Silverlight and support for Web Fonts
http://weblogs.mozillazine.org/roc/arch ... _batt.html
Scalable Inman Flash Replacement (sIFR)
http://www.mikeindustries.com/blog/sifr/
Requires both JavaScript and Flash
Flash is used to display the font
Supported by all major web browsers
typeface.js
http://typeface.neocracy.org/
JavaScript has to be enabled
One or more images are generated in the web browser
Supported by all major web browsers
True Font Family
http://www.truefontfamily.com/
JavaScript has to be enabled
An image is generated on the server
Supported by all major web browsers
@font-face rule
http://www.w3.org/TR/CSS2/fonts.html#font-descriptions
More and more web browsers support it; see below
Web Fonts and Web Browsers
Internet Explorer (since version 4)
Only supported on Windows
Web Embedding Fonts Tool (WEFT)
http://www.microsoft.com/typography/web/embedding/
Netscape Navigator (version 4 and 5)
Netscape had it's own solution (TrueDoc from Bitstream) but discontinued it.
Safari (since version 3.1)
Cascading Style Sheets level 3 (CSS3)
Through the @font-face rule (downloads fonts to the client)
Opera (soon)
Opera will soon reveal it's improved support for web fonts. I don't know the details, but this article might be very related:
http://www.alistapart.com/articles/cssatten
Mozilla Firefox (to be expected in version 3.1)
https://bugzilla.mozilla.org/show_bug.cgi?id=70132
Intellectual Property
There are numerous discussions about IP, here are a few:
Fonts and the Law
http://www.fontembedding.com/fonts-and-the-law/
Other Resources
Web Fonts: User Survey Results
http://blogs.adobe.com/typblography/200 ... sults.html
Silverlight and support for Web Fonts
http://weblogs.mozillazine.org/roc/arch ... _batt.html
-
- Typographer
- Posts: 793
- Joined: Mon Feb 23, 2004 1:13 pm
- Location: Enoch, Utah
Re: Web Fonts
I have a question about using typeface.js with fonts created using High-Logic. I tried to upload one using the converter on the typeface.js site, but it said that the author of the font had chosen to disallow embedding. I have talked with the author who assures me he has done nothing in particular to restrict this. Does anyone know what needs to be done in High-Logic to make the typeface.js site allow it?
Thanks,
~randy
Thanks,
~randy
-
- Top Typographer
- Posts: 2038
- Joined: Tue Sep 14, 2004 6:41 pm
- Location: Worcestershire, England
- Contact:
Re: Web Fonts
I had not previously known of the typeface.js technology.
I looked at various search engines and found many mentions of typeface.js.
I did find the following thread.
http://typophile.com/node/50593
That has a link to the following web page.
http://typeface.neocracy.org/
I have found the following.
http://typeface.neocracy.org/fonts.html
Is that the typeface.js site to which you refer please?
FontCreator does have a facility in a panel named "Font embedding - Licensing rights" where various flags can be altered, FontCreator providing a default setting, so that is perhaps the right place to be looking and trying some experiments. That panel is on a larger panel, which panel can be accessed using Format Settings... General and then it is on the right-hand-side just less than half-way down the panel.
I hope that this helps.
William Overington
21 November 2008
I looked at various search engines and found many mentions of typeface.js.
I did find the following thread.
http://typophile.com/node/50593
That has a link to the following web page.
http://typeface.neocracy.org/
I have found the following.
http://typeface.neocracy.org/fonts.html
Is that the typeface.js site to which you refer please?
FontCreator does have a facility in a panel named "Font embedding - Licensing rights" where various flags can be altered, FontCreator providing a default setting, so that is perhaps the right place to be looking and trying some experiments. That panel is on a larger panel, which panel can be accessed using Format Settings... General and then it is on the right-hand-side just less than half-way down the panel.
I hope that this helps.
William Overington
21 November 2008
-
- Top Typographer
- Posts: 2038
- Joined: Tue Sep 14, 2004 6:41 pm
- Location: Worcestershire, England
- Contact:
Re: Web Fonts
I had a try and have found how to solve the problem.
Here is a copy of the transcript.
----
Friday 21 November 2008
8:17 am
Start FontCreator 5.6.
Open CHRONTXT.TTF Chronicle Text Version 0.26 of 10 September 2005.
Save As CHRONEX1.TTF.
Note that the Format Settings... Header page now states the date modified as 21 November 2008.
Try the converter at the http://typeface.neocracy.org/fonts.html web page.
The following message was received, in red.
Error: This font's vendor has indicated that it is not permissible to embed this font.
So, edit CHRONEX1.TTF and switch off the one font embedding flag that is presently switched on.
Try the conversion again.
It works.
----
So, I have produced a font for the typeface.js system and I do not know how to use it at the time of writing this note!
Anyway it appears that I have solved the original problem.
If you or any other reader wants to use the chronicle_text_regular.typeface.js then I am happy for that use to take place.
William Overington
21 November 2008
Here is a copy of the transcript.
----
Friday 21 November 2008
8:17 am
Start FontCreator 5.6.
Open CHRONTXT.TTF Chronicle Text Version 0.26 of 10 September 2005.
Save As CHRONEX1.TTF.
Note that the Format Settings... Header page now states the date modified as 21 November 2008.
Try the converter at the http://typeface.neocracy.org/fonts.html web page.
The following message was received, in red.
Error: This font's vendor has indicated that it is not permissible to embed this font.
So, edit CHRONEX1.TTF and switch off the one font embedding flag that is presently switched on.
Try the conversion again.
It works.
----
So, I have produced a font for the typeface.js system and I do not know how to use it at the time of writing this note!
Anyway it appears that I have solved the original problem.
If you or any other reader wants to use the chronicle_text_regular.typeface.js then I am happy for that use to take place.
William Overington
21 November 2008
-
- Moderator
- Posts: 11202
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Re: Web Fonts
Today FontLab released a sIFR based product, Photofont WebReady. It allows you to use any font you want on your web pages. It supports colors and transparency.
I haven't tried it myself, but it seems the technique related to TrueType and OpenType fonts is similar to CoffeeCup Website Font. However Photofont WebReady also allows you to embedded a web photofont (a bitmap-based Flash font object).
I haven't tried it myself, but it seems the technique related to TrueType and OpenType fonts is similar to CoffeeCup Website Font. However Photofont WebReady also allows you to embedded a web photofont (a bitmap-based Flash font object).
-
- Top Typographer
- Posts: 9888
- Joined: Tue Oct 29, 2002 5:28 am
- Location: Seven Kings, London UK
- Contact:
Re: Web Fonts
Opera 10 Alpha is available with some support for Web Fonts.
You need to know how to write CSS to add custom fonts to your own web pages.
You need to know how to write CSS to add custom fonts to your own web pages.
Added Web font support, allowing the download of fonts specified in font descriptors in @font-face at-rules; TrueType (TTF), OpenType (OTF), and SVG fonts are supported
- Attachments
-
- Opera10 Portal.jpg (213.53 KiB) Viewed 37112 times
-
- Top Typographer
- Posts: 9888
- Joined: Tue Oct 29, 2002 5:28 am
- Location: Seven Kings, London UK
- Contact:
Re: Web Fonts
WebFont Test Page using WOFF fonts created using FontCreator 7.
Opera 11.64 and 12.15 only work if I disable hinting when creating the fonts (the fonts on the test page are hinted).
Opera Next works OK, as do Firefox and SRWare Chrome Iron.
This is how it is supposted to look:
Opera 11.64 and 12.15 only work if I disable hinting when creating the fonts (the fonts on the test page are hinted).
Opera Next works OK, as do Firefox and SRWare Chrome Iron.
This is how it is supposted to look:
Last edited by Bhikkhu Pesala on Fri Jun 07, 2013 6:15 pm, edited 2 times in total.
Reason: Updated screen shot
Reason: Updated screen shot
-
- Top Typographer
- Posts: 9888
- Joined: Tue Oct 29, 2002 5:28 am
- Location: Seven Kings, London UK
- Contact:
Re: Web Fonts
Looks like some caching issues with Opera. I updated the screen shot.
-
- Top Typographer
- Posts: 2038
- Joined: Tue Sep 14, 2004 6:41 pm
- Location: Worcestershire, England
- Contact:
Re: Web Fonts
I have not made a web font yet.Bhikkhu Pesala wrote:WebFont Test Page using WOFF fonts created using FontCreator 7.
I am hoping to make a web font version of my Stones font, naming it StonesWebfont and then try to produce a webpage to test it.
I have looked at the source code of the following web page.
http://www.softerviews.org/WebFonts/
My present knowledge of HTML is fairly basic, I have never used a stylesheet at all.
I clearly have a huge learning curve over producing modern web pages.
In order to get me started, as my goal here is to produce and use a web font, could you possibly show me the source code to produce the following please?
The word STONES large and in grey on one line with the words WEB FONT in a smaller size on the next line in blue, both lines using a web font named StonesWebfont.
I think that I am going to need the following somewhere within the code.
@font-face {font-family: "StonesWebfont"; src: url("http://www.users.globalnet.co.uk/~ngo/S ... bfont.woff") format("woff");}
I am hoping to make the font later today.
William Overington
9 July 2014
Re: Web Fonts
As you have Serif PagePlus X5 with its 'Web Publishing' mode, you don't need to learn much in order to achieve your goal.William wrote:My present knowledge of HTML is fairly basic, I have never used a stylesheet at all.
I clearly have a huge learning curve over producing modern web pages.
Your inference is correct. You also need to place it inside a 'style' tag element, like this:William wrote:I think that I am going to need the following somewhere within the code.
@font-face {font-family: "StonesWebfont"; src: url("http://www.users.globalnet.co.uk/~ngo/S ... bfont.woff") format("woff");}
Code: Select all
<style type="text/css">
@font-face {font-family: "StonesWebfont"; src: url("http://www.users.globalnet.co.uk/~ngo/StonesWebfont.woff") format("woff");}
</style>
Good luck!William wrote:I am hoping to make the font later today.
-
- Top Typographer
- Posts: 2038
- Joined: Tue Sep 14, 2004 6:41 pm
- Location: Worcestershire, England
- Contact:
Re: Web Fonts
Thank you.
I have now made the font.
I was thinking that I would need to write the HTML code directly, or maybe have used WebPlus X5 in some way. I did not know that I could use PagePlus X5.
I had not thought at all that I would need to install the woff font on the PC.
William
I have now made the font.
I was thinking that I would need to write the HTML code directly, or maybe have used WebPlus X5 in some way. I did not know that I could use PagePlus X5.
I had not thought at all that I would need to install the woff font on the PC.
William
-
- Top Typographer
- Posts: 2038
- Joined: Tue Sep 14, 2004 6:41 pm
- Location: Worcestershire, England
- Contact:
Re: Web Fonts
I have been unable to install the font.
I got a dialogue panel saying that the file is either invalid or damaged.
I am running Windows xp, so maybe that is part, or all, of the problem.
William
I got a dialogue panel saying that the file is either invalid or damaged.
I am running Windows xp, so maybe that is part, or all, of the problem.
William