Pages tagged _font_face:

Combining Cufón and @font-face • CSS & (X)HTML • Kilian Valkhof

Combining Cufón and @font-face
Jeffrey Zeldman Presents : Web fonts now (how we’re doing with that)
The Web Fonts Wiki has a page listing fonts you can legally embed in your site designs using the CSS standard @font-face method. Just as importantly, the wiki maintains a page showing commercial foundries that allow @font-face embedding. Between these two wiki pages, you may find just the font you need for your next design (even if you can’t currently license classics like Adobe Garamond or ITC Franklin and Clarendon).
css fonts typography
Web design insights since 1995. Personal site of Jeffrey Zeldman, publisher of A List Apart Magazine, founder of Happy Cog Studios, co-founder of The Web Standards Project, co-founder of the Event Apart design conference, author of Designing With Web Standards.
"The person who figures out a designer-friendly solution to all this will either be hailed as a hero/heroine or get rich. Meanwhile, near-complete solutions of varying implementation difficulty exist."
@font-face: The Potential of Web Typography
How can @font-face be used with currently implemented CSS selectors to create engaging, nuanced and more mature typography? Let's find out.
Como el SifR pero sin él... con Firefox 3.5
@font-face: The Potential of Web Typography
Firefox 3.5 is out. And the more users download it, the more designers will be able to take advantage of the @font-face CSS rule. How can @font-face be used with currently implemented CSS selectors to create engaging, nuanced and more mature typography? Let's find out.
beautiful fonts with @font-face at
The hazy future of Web typography - Ars Technica
7/6/09 article: @font-face and typekit information
Chris Foresman for Ars Technica: "Type designers and font foundries don't want their fonts ripped off, browser vendors want a single standard, and designers want to be able to use whatever font best suits the design at hand. So far there isn't one clear solution that reconciles these competing desires."
Font workarounds Great article on font usage now and in the past.
20 beautiful free @font-face fonts -
Font Squirrel | Download Hundreds of Free @font-face Fonts
Free fonts with ready made css
Hundreds of fonts free for commercial use and @font-face inclusion.
use more typefaces valid css
In the Woods – @font-face and 15 Free Fonts You Can Use Today
Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.
What is @font-face? @font-face is a CSS rule that lets web designers link to a font that visitors may not have installed. Using this, we can get around the problem of web-safe fonts as well as prevent creating additional dependencies in other methods such as Cufón, sIFR, etc.
Bulletproof @font-face syntax « Paul Irish
Minimising the CSS required for cross browser @font-face.
With all these CSS3 enhancements going on it's not hard to get confused. We're still trying to fond the best way of doing things. This is apparently the most bulletproof way of including the @font-face rule for IE and modern browsers.
21 Awesome @font-face Embeddable Typefaces | Spyre Studios
While @font-face may not work in all browsers, I think it’s still one of the best solution available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and check out some typefaces you can use with @font-face :)
@font-face in Depth
Embedding fonts into your website
Screencast: Converting OTF or TTF to EOT -
Snook’s screencast brings EOT to the masses - solution to tackle the conversion process for IE
Getting around the mess that is converting TTF to EOT (is this yet another reason to hate IE?)
Becoming a Font Embedding Master -
Great example of using @font-face.
Nice techniques for embedding user fonts on webpages. Breaks out of the limited font constraints.
Font embedding in all modern browsers using @font-face
High Performance Web Sites :: @font-face and performance
I started doing some research to answer these questions, but during that time there have been a number of great posts about @font-face performance issues: * Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face fun This blog post summarizes Paul, Stoyan, and Zoltan’s findings plus some very important discoveries of my own.
Lazy load to the resuce then…
Last week I was reading Ajaxian (my favorite blog) and saw the post about @font-face. I had been wondering for a few months about how font files impact web performance, so I followed the story back to Zoltan Hawryluk’s original post: @font-face in Depth. A great read on the aesthetics, mechanics, and compatibility issues of fonts, but not much about performance. I added a comment:
Font Squirrel | Create Your Own @font-face Kits
A very nice way to generate font files for use on the web, if they are legally licensed for that use.
A handy tool by Font Squirrel to create @font-face kits
Web fonts and standards – Jeffrey Zeldman Presents The Daily Report
@font-face { font-family: "Watusi"; src: url("") format("truetype"); } h1 { font-family: "Watusi", sans-serif; }
Web fonts and standards
In the Woods – How to Achieve Cross-Browser @font-face Support
How to Achieve Cross-Browser @font-face Support
At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers.
In the Woods – How to Achieve Cross-Browser @font-face Support
after Firefox 3.6 – new font control features for designers at
Endlich wird es einfacher, Fonts mit allen Extras (Ligaturen etc) im Browser zu verwenden. Ich hoffe, das Feature kommt bald! -- Was heute Möglich ist habe ich kürzlich gebookmarkt.
bookmarked by
Web Typography: Font Embedding Services « Noupe
There are a lot of options out there for using other-than-websafe fonts in your website designs. Dynamic text replacement methods or resorting to very long fontstacks (where most of your visitors won’t see the font you wanted anyway) have long been the standard for using anything other than websafe fonts. But the @font-face function changes all that. With most major, modern browsers now compatible with it, services are cropping up all over for providing the fonts you want to embed on your site without eating up your bandwidth and server space. One of the biggest hurdles these services help to overcome is the licensing issues related to embedding certain fonts on your website. While many fonts (especially open source fonts) have licenses that allow for embedding, others strictly prohibit it. Webfont services work with the type foundries to provide fonts for embedding while also providing the security that foundries insist upon. Currently, there are four such services available, thoug
Nice Web Type – How to use CSS @font-face
A List Apart: Articles: Real Web Type in Real Web Context
Now that browsers support real fonts in web pages and we can license complete typefaces for such use, let’s move past the hype of web type and think pragmatically about how to use real fonts in our web projects. Several experiments with the CSS @font-face property, including some preliminary work with the much-anticipated Typekit, have led me to a single, urgent conclusion: I need to know how my type renders on screens, in web browsers. To that end, I created Web Font Specimen, a handy (free) resource web designers and typographers can use to see how typefaces will look on the web. » Web design focused articles and resources » Blog Archive » Smoother @font-face embedding in IE 7 & 8
A look at disabling ClearType to improve font embedding but possibly with mixed results. Interesting discussion in the comments.
Better, smoother embedded fonts in IE7 and IE8 #css
Smoother @font-face embedding in IE 7 & 8
» @font-face Browser Support & Tutorial :: CSS, JavaScript and XHTML Explained
Goede uitleg van @font-face en met overzicht van browsersupport
Fontspring | Desktop and @font-face fonts
How to reference fonts on the server
Some tips for implementing @font-face with your CSSes Web Fonts
Web fonts
20 Fresh High Quality Free Fonts - Smashing Magazine
(via @smashingmag)
Spice Up Your Web Typography with @Font-Face
The @font-face is commonly referred to as a new CSS3 feature, but has actually been around for some years. The only problem was there weren’t any browsers to support it (apart from IE’s obscure EOT methods), so it sat collecting dust at the back of the CSS2 specification. Recently however, browsers have started implementing support for the @font-face rule. First came Safari (3.1), then Firefox (3.5), Opera (10) and Chrome (4.0). So now, any @font-face implementation will be available for a large chunk of your visitors. What’s more, if you insist on IE support you can even get everything working with a quick fumble around with Microsoft’s WEFT tool.
14 tutoriais CSS3 para facilitar nossa vida
Google Font Directory
Google Font API - Google Code
Easy-to-embed web fonts. Too easy. (I just did.)
The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.
Font Preview - Google Font Directory
Google font preview
The Essential Guide to @font-face
A List Apart: Articles: Web Fonts at the Crossing
Good Web Fonts for Online Text
Fontdeck: Real fonts for your website
Web Fonts
A Guide to Google Font API
Take a plunge into the untapped potential of Google's Font API.
font dragr | A HTML5 web app for testing custom fonts | The CSS Ninja
Drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts in the left hand side module and it will be added to the list.
Quickly test those new fonts
Works only in Firefox
Typekit and Google Announce Open Source Collaboration « The Typekit Blog
More: and "I'm surprised that most of the stuff in the current Google font directory made the cut":
Better to work with, than against, a giant.
Typekit announces that it has teamed up with Google to build the Web Font Loader API, which more smoothly enables web designers to load custom fonts into their pages. Additionally, Typekit has added Goolgle’s new collection of free web fonts to it's own offering.
Fonts Live
technik zum einbinden von fonts mittels @font-face, microsoft, kostenpflichtig
Premium quality web fonts using CSS @font-face * Use real fonts, eliminate images for your headlines * Hand-tuned by the font experts at Ascender * Cloud-hosted service for fast implementation * Support for all major web browsers
Type Folly—Google Font API web fonts preview
Get CSS3 or HTML code for custom font/text layouts.
With TypeFolly you can create, save and export your type projects. All projects can be saved in our database or exported as compliant css / html.
25 Completely Free Fonts Perfect for @fontface - Speckyboy Design Magazine
free fonts are awesome (links to more free fonts @ the bottom)
In this post we have collected 25 of the best completely FREE headline fonts that could be easily used with @fontface property and all packaged with a web-font license.
25 Completely Free Fonts Perfect for @fontface - Speckyboy Design Magazine -
WebFont Loader - Google Font API - Google Code
WebFont Loader - Google Font API - Google Code
WebFont Loader - Google Font API - Google Code
WebFont Loader - Google Font API - Google Code
WebFont Loader - Google Font API - Google Code
St Marie on the Behance Network
St Marie Thin is a preview for the upcoming release of a new typefamily, but this time i want to go further with that freefont-thing. There will be one normal Open-Type-Font and an optimzed Webfont, so you can design online and offline with a hiqh quality freefont from Stereotypes.