How-To implement cross-browser @font-face support avatar
แœŒแœ“แœƒแœ’ (Yuki)
 | | 5 ๋ถ„ ์ฝ๊ธฐ

Fediverse Follow

Firefox 3.6 “Final” was released today and one of the major addition is the support for the Web Open Font Format or “WOFF”. The result of a collaboration between the font designers Erik van Blokland and Tal Leming with help from Mozilla’s Jonathan Kew.

What is it for? How can you use it? By using the CSS2 @font-face (yes CSS2 not CSS3). This new format is promising because of the large number of support from the font creators and font foundries. Hopefully this will be the first font format that Microsoftยฎ will accept for Internet Explorer browser other than their existing Embedded OpenType or “EOT”.

If IE9 supports WOFF, then this format will be the first cross-browser @font-face/webfont format. There is no question when it comes to Chromium/Chrome, Opera, and Safari, the problem with cross-browser technology is always with MSIE.

Update: Microsoft added WOFF support in Internet Explorer 9 Platform Preview 3.

So how can you start using WOFF? Just follow these simple steps:

  1. Search for your font of choice
  2. Check the license of your font if it is allowed to be used in a website (sometimes called website embedding). I strongly suggest to contact the font creator/foundry and clarify the matter to them.
  3. Go to FontSquirrel’s @font-face generator. The tool is self-explanatory.
  4. Then click the “Download Your Kit” button and open the zip file.
  5. You should have the following files (assuming you uploaded one font only)
    • Your original font (ttf/otf)
    • 1 eot file
    • 1 svg file
    • 1 woff file
    • stylesheet css files
  6. Edit the stylesheet for your own use (the URL location of the font, etc.)

Sample @font-face stylesheet

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: 'BaybayinLopezRegular';
  src: url('baylopez-webfont.eot');
  src: url('baylopez-webfont.woff') format('woff'),
       url('baylopez-webfont.ttf') format('truetype'),
       url('baylopez-webfont.svgz#webfontsBCU3ofZ') format('svg'),
       url('baylopez-webfont.svg#webfontsBCU3ofZ') format('svg');
  unicode-range: U+1700-171F, U+1720-173F, U+1740-175F, U+1760-177F;
}

And here’s what happens when a browser reads your font stylesheet:

  1. font-family name declared as: BaybayinLopezRegular
  2. If MSIE: downloads baylopez-webfont.eot
  3. If not, then it reads the WOFF file if the browser supports it
  4. If not, then it reads the TTF file if the browser supports it
  5. If not, then the browser reads the SVG file if it supports it
  6. If all else fails, then it does nothing. Depending on your setup, it will either display boxes or it will search your other font declarations
  7. The browser will also read the unicode-range if it supports it, and only download those specific Unicode points and ignore the rest. Making the size of transmitted to your visitors smaller.

@font-face CSS Rule Browser Compatibility Chart

The table below presents which font format is supported by the four major browsers - Chromium/Chrome, Firefox, Internet Explorer, Opera, and Safari. As you will see, no font format is supported across all five browsers except for WOFFโ€ฆ in the near future.

Microsoft’s EOT is out of the race, even though many font creators and foundries support it, the other four browsers are likely never going to support it. Then OTF, SVG, and TTF are out too because Internet Explorer is surely never going to implement it, and font creators/foundries do not like these formats for @font-face use.

That is where WOFF comes in. Commercial font creators and font foundries wants control (or restriction if you want it that way) to the fonts that can be used for the CSS @font-face rule.

Of course there are other advantages to WOFF like compression. WOFF is compressed, which site administrators will like because it eats less bandwidth. You can go check the fonts that came with your FontSquirrel generated font kit, WOFF is the smallest of them.

For now as with all new technologies, we have to wait until all major browsers adds support for WOFF. But that should not stop you from using it today. Just like with CSS3 and some HTML5, you can use it right now. It will save you time later if you do the update now than whenever you feel like to, which you will probably forget.

Chrome
(WebKit)
Firefox
(Gecko)
IE
(Trident)
Opera
(Presto)
Safari
(WebKit)
EOTNoNov4.0NoNo
OTFNov3.5Nov10.0v3.1
SVGv0.3NoNov10.0v3.1
TTFv2.0v3.5Nov10.0v3.1
WOFFv5.0v3.6v9.0NoNo

Let’s Test Your Browser

If you see the Baybayin writing script below, then your browser supports one of the font formats - EOT, OTF, SVG, TTF, or WOFF. If not, then you should upgrade your browser because my font stylesheet captures all browsers. (At least from my testing, on two computers without any Baybayin fonts - it displays correctly on all the major browsers.)

Example #1

  • Filipino-Baybayin: แœ€แœ…แœ” แœŠแœ“แœƒแœ“ แœ€แœŒแœ” แœ‰แœ แœ แœ†แœ‚ แœ‡แœ‘แœ’แœŽแœ” แœแœŽ แœˆแœ…แœ” แœ‰แœ“แœแœ’แœ‡แœ’แœ…แœ” แœ‹แœแœˆแœ“แœ‹แœ” แœˆ แœ„แœ†แœแœ”แœถ

  • Filipino-Latin: Ang buko ay para sa tao dahil wala nang puwedeng mainom na gatas.

  • English: The coconut is for people because there is not enough milk to drink.

Example #2

  • Filipino-Baybayin: แœ‰แœ“แœแœ’แœ‡แœ’ แœƒแœ…แœ” แœŒแœ“แœ‹แœ‹แœˆแœ” แœ‡แœ‘แœ’แœŽแœ” แœ แœŠแœ„แœ“แœ…แœ” แœแœ“แœŽแœ’แœ†แœถ

  • Filipino-Latin: Puwede kang yumaman dahil sa bagong roleta.

  • English: You can be rich because of the new wheel.

Enjoy!


Sources:


๋งˆ์Œ์— ๋“œ์…จ๋‚˜์š”? ์ด ๊ฒŒ์‹œ๋ฌผ์„ ๊ณต์œ ํ•˜๊ณ  ์•„๋ž˜์— ๋Œ“๊ธ€์„ ๋‚จ๊ธฐ๊ณ  ์„ ๋ฌผ์„ ๋ณด๋‚ด์ฃผ์„ธ์š”! (์ƒˆ ํƒญ/์ฐฝ์—์„œ ์—ด๋ฆฝ๋‹ˆ๋‹ค)

avatar

แœŒแœ“แœƒแœ’ (Yuki ใƒป ้›ชไบฎ)์ด๊ฒƒ์ด ๋ง๊ฐ์˜ ๋์ด ์•„๋‹ˆ๋ผ๋ฉด ๋‚ด ์ธ์ƒ์ด ๋ฐ”๋กœ ์˜ค๋Š˜ ๋๋‚  ๋“ฏ ๋งค์ผ ์‚ด ๊ฒƒ์ด๋‹ค.

YOOki (ๆŸณ ็ด€ ใƒป ์œ  ๊ธฐ) ์—ฐ๋Œ€๊ธฐ

YOOki (ๆŸณ ็ด€ ใƒป ์œ  ๊ธฐ) ์—ฐ๋Œ€๊ธฐ ์€ แœŒแœ“แœƒแœ’ (Yuki ใƒป ้›ชไบฎ) ์˜ ์บ์ฃผ์–ผ ๋ฐ ๊ฐœ์ธ ๋ธ”๋กœ๊ทธ๋กœ์˜ ๋ณต๊ท€์ž…๋‹ˆ๋‹ค. “YOOki"๋ผ๋Š” ์ด๋ฆ„์€ YourOnly.One ์˜ ๋‘๋ฌธ์ž์–ด์™€ ๋‚ด ๋ณ„๋ช… แœŒแœ“แœƒแœ’ (Yuki ใƒป ้›ชไบฎ) ์˜ ๋งค์‹œ์—…์ž…๋‹ˆ๋‹ค.

ํฅ๋ฏธ๋กญ๊ฒŒ๋„ ์ค‘๊ตญ ์ „์„ค์— ๋”ฐ๋ฅด๋ฉด ใ€ŒๆŸณใ€(YOO)๋Š” ๊ณ ๋Œ€ ์ค‘๊ตญ์˜ ์„ฑ์ž…๋‹ˆ๋‹ค.์ด ์„ฑ์˜ ์กฐ์ƒ์€ Yu Shun์ด๋ผ๋Š” ๊ณ ๋Œ€ ํ˜„์ธ๊ณผ ๋ฐ€์ ‘ํ•œ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•œ๊ตญ์—์„œ๋Š” ใ€Œ์œ  (YOO)“ํ˜ˆํ†ต ํ”์  ํ•˜, ํ•œ, ์กฐ์„  ์™•์กฐ์— ์œ , ์œ  ์„ฑ์˜ ์†Œ์œ ์ž๋Š” ์ž์„ ๊ณผ ๊ทผ๋ฉด์œผ๋กœ ๋ช…์„ฑ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. 1

๋˜ํ•œ ์šฐ์•„ํ•˜๊ฑฐ๋‚˜ ๊ฐ€๋Š ๋‹ค๋ž€ ๊ฒƒ์„ ์˜๋ฏธํ•˜๋Š” “๋ฒ„๋“ค ๋‚˜๋ฌด"๋˜๋Š” “๋ฒ„๋“ค ๋‚˜๋ฌด"์˜ ๋‹จ์–ด์ด๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์‚ฌ๋žŒ์—๊ฒŒ ์ง€์†์ ์ธ ์˜์–‘๊ณผ ์ž์›์„ ์ œ๊ณตํ•˜๋Š” ์ˆ˜์—ญ ๊ทผ์ฒ˜์—์„œ ์ž๋ผ๋Š” ๋‚˜๋ฌด. ๊ทธ๊ฒƒ์€ ๋˜ํ•œ ์กด์žฌ, ๊ธฐ๋ฆ„ (๊ธฐ์Œ (?)), ๊ทธ๋ฆฌ๊ณ  ๋‹จ์ˆœํžˆ “U”(๋‹น์‹ )๋ฅผ ์˜๋ฏธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•œ์ž ใ€Œ็ด€ใ€(ki) ๋ฌธ์ž๋Š” ๊ธฐ๋ก, ํ›ˆ๋ จ, ์งˆ์„œ ์ œ๊ณต์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ•œ๊ธ€์— ํ•ด๋‹นํ•˜๋Š” ใ€Œ๊ธฐใ€(๊ธฐ๊ธฐ)๋Š” ์—๋„ˆ์ง€, ์ •์‹ , ๊ธฐ์น˜, ๊ธฐ๊ฐ„์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋™๋ช…์‚ฌ ๋˜๋Š” ๋ถ€์ •์‚ฌ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์ ‘๋ฏธ์‚ฌ์ด๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค.

“ๆŸณ ็ด€"๊ณผ “์œ  ๊ธฐ"๊ฐ€ “YOOki"์˜ ์ค‘๊ตญ์–ด์™€ ํ•œ๊ตญ์–ด๋กœ ๋ฌด์Šจ ๋œป์ธ์ง€ ์•„์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?


๊ณ ์‹œ : Google ๋ฒˆ์—ญ

์ง€๊ธˆ ์žฌ์ƒ ์ค‘
์†Œ์…œ ๋งํฌ