WOFF: Difference between revisions
m (→Example) |
m (→Links) |
||
(5 intermediate revisions by the same user not shown) | |||
Line 27: | Line 27: | ||
* Create an html page that includes the WOFF font and use it. | * Create an html page that includes the WOFF font and use it. | ||
Life example: http://tecfa.unige.ch/guides/WOFF/woff-blisssym-example.html ( | Life example: http://tecfa.unige.ch/guides/WOFF/woff-blisssym-example.html (tested oct. 2015 with FF, IE and Chrome under Win8 and Ubuntu). | ||
<source lang="HTML5"> | <source lang="HTML5"> | ||
<!DOCTYPE html> | |||
<html> | <html> | ||
<head> | <head> | ||
Line 37: | Line 37: | ||
@font-face { | @font-face { | ||
font-family: 'MyBliss'; | font-family: 'MyBliss'; | ||
src: url('BLISSYM.woff') format('woff') | src: url('BLISSYM.woff') format('woff'), | ||
url('BLISSYM.woff2') format('woff2'); | url('BLISSYM.woff2') format('woff2'); | ||
} | } | ||
Line 60: | Line 60: | ||
</source> | </source> | ||
It also is possible to use some kind of local inline styling, but as of Oct 15, this only worked under Chrome. | |||
<source lang="HTML5"> | |||
<div id="scoped-content"> | |||
<style type="text/css" scoped> | |||
@font-face {font-family: 'MyBliss'; src:url('BLISSYM.woff') format('woff');url('BLISSYM.woff2') format('woff2');} | |||
</style> | |||
<span style="font-family:MyBliss;color:blue;"> | |||
| |||
</span> | |||
<hr> | |||
</div> | |||
</source> | |||
* Live example: http://tecfa.unige.ch/guides/WOFF/woff-blisssym-inline-example.html | |||
== Links == | == Links == | ||
Line 68: | Line 83: | ||
* [https://css-tricks.com/snippets/css/using-font-face/ Using @font-face] (css-tricks.com) | * [https://css-tricks.com/snippets/css/using-font-face/ Using @font-face] (css-tricks.com) | ||
* [https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF WOFF] (tips on using woff2 with FF). See also [https://support.mozilla.org/en-US/questions/959250 this]. | |||
'''fonts''': | |||
* [https://www.google.com/fonts/ Google fonts] (you can choose among 700+ fonts and then link to these in your stylesheet). | |||
* [https://icomoon.io/ Iconfonts] commercial, but there is a free version. | |||
[[Category: Web technology tutorials]] | [[Category: Web technology tutorials]] | ||
Line 73: | Line 94: | ||
[[Category: CSS]] | [[Category: CSS]] | ||
[[fr:tutoriel CSS]] | [[fr:tutoriel CSS]] | ||
[[Category: Fonts]] |
Latest revision as of 11:59, 5 December 2018
Introduction
“The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009 and is now a World Wide Web Consortium (W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.”
Mime type
application/font-woff
Make sure that your server knows it.
Using WOFF files
In order to use WOFFs, use the CSS @font-face
directive. I will alllow:
- Defining a font name that you later can use
- Associate one or more font files with that name. If you plan to support fairly modern plus really modern browsers, you should provide both a woff and woff2 file.
Example
Let's create a web page that includes a [font]
- Donwnload BLISSYM.TTF from http://blissym.com/
- Convert with TTF to WOFF converter to WOFF 1
- On the same website there is also a WOFF2 converter you could try.
- Create an html page that includes the WOFF font and use it.
Life example: http://tecfa.unige.ch/guides/WOFF/woff-blisssym-example.html (tested oct. 2015 with FF, IE and Chrome under Win8 and Ubuntu).
<!DOCTYPE html>
<html>
<head>
<title>Simple WOFF example</title>
<meta charset="UTF-8"/>
<style type="text/css">
@font-face {
font-family: 'MyBliss';
src: url('BLISSYM.woff') format('woff'),
url('BLISSYM.woff2') format('woff2');
}
.blissy {font-family:MyBliss;color:blue;}
</style>
</head>
<body>
<p>
Text in one paragraph includes a <a href="http://edutechwiki.unige.ch/en/WOFF">WOFF</a> font. The Web Open Font Format (WOFF) is a font format for use in web pages is a World Wide Web Consortium (W3C) Recommendation.
</p>
<p>
Look at the source, Lucille. Below some <a href="http://edutechwiki.unige.ch/en/Pictographic_language">Bliss symbols</a>:
</p>
<hr>
<span class="blissy">
</span>
<hr>
</body>
</html>
It also is possible to use some kind of local inline styling, but as of Oct 15, this only worked under Chrome.
<div id="scoped-content">
<style type="text/css" scoped>
@font-face {font-family: 'MyBliss'; src:url('BLISSYM.woff') format('woff');url('BLISSYM.woff2') format('woff2');}
</style>
<span style="font-family:MyBliss;color:blue;">
</span>
<hr>
</div>
Links
- Web Open Font Format (Wikipedia)
- WOFF File Format 1.0, W3C Recommendation 13 December 2012
- Using @font-face (css-tricks.com)
fonts:
- Google fonts (you can choose among 700+ fonts and then link to these in your stylesheet).
- Iconfonts commercial, but there is a free version.