Embed Custom Fonts with Cufón Font Replacement and Google Fonts
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
Embedding custom fonts on a website has always been a problem, but thanks to JavaScript and especially jQuery, things are getting solved one at a time. Cufón Font Replacement is now the most popular way to use custom fonts and appeared as a very efficient alternative to the old SiFR, which was very tricky to use. Now, thanks to Google, developers have another alternative to font embedding and is called Google Font Directory.
How to Implement Cufón
Step 1: Download Cufón
Implementing Cufón is very simple and doesn`t require too much knowledge. First step is to visit Cufón Website and download Cufón. Right-Click on Download and Save It on your desktop.
Step 2: Convert a font
The font I`m going to implement is Yanone Kaffeesatz, an elegant and clean font and you can download it from FontSquirrel.
Go back to Cufón and continue with the steps on the website. If you want, you can use the bold and italic files as well.
The next step is to include the glyphs. Don`t hit All, choose only what you need. This way you`ll keep the javascript file to a reasonable size.
Now hit “Let`s Do This” and download the javascript file generated by the app.
Step 3: An example
Now that you have the javascript files, let`s implement them into a page. Create a new folder called “js” and place the cufon javascript files inside it. Create a HTML file too.
Open the index file in your favorite code editor, add the basic HTML tags, and then reference your two Javascript files just before the “” tag. If you`re going to apply the tutorial to a website, you`ll probably use the custom font only for titles. For this, you have to import jQuery just before the Cufón files.
My entire code looks like this:
Explanations:
- Lines 8-15: The javascript files are called; the first file which is called has to be the jQuery library in order to make it work.
- Lines 17-19: The Cufón javascript function asks cufon-yui.js to replace any existing h1 inside a div called “content” with the custom font.
- Lines 21-25: styling options of the #container h1
- Line 29: a normal h1
- Line 30: the targeted h1 which will be written with the custom font.
The result:
Implementing Google Fonts
Another way to implement a font into a website is to use the Google Font API.
To help developers, Google has created the Google Font Directory. There you can browse a catalog of available fonts and copy the code required to use them on your web page.
Browse the fonts and select any font you want to implement. I“m using the same font, Yanone Kafeesatz
If you`re not decided, you can even preview fonts inside the Font Previewer.
Go back to the font and hit “Use this font”. There you`ll find the code which generates the custom font.Also you`ll have variants and you can use all of them. API will generate the necessary CSS specific to the user’s browser so you can use the font on your page. Simply use the font in your CSS font stack like any other font.
For our example the code looks like in the picture:
Explanations:
- Lines 8-9: We called the CSS library generated by the Google API. Notice that the file is on Google servers so this is a plus because the fonts will load faster.
- Line 15: the CSS code used to apply the font to the desired text, in our case, the h1 inside the “#content” div.
The result is the same with the one generated by Cufón
Conclusions:
Using custom fonts never been so easily and I`m sure that the technology will evolve even more.Cufón is a nice way to add any font, but because is using Javascript technology, selecting the text is a problem. Cufón doesn`t allow font selection. On the other hand, Google supports text selection. Still, Cufón remains the most used font-replacement tool because of its capability to embed any font. Google has to work harder to improve their font library by adding more and more fonts to the database.
Hope you enjoyed the lesson and implemented some fonts and I look forward to hear which way you like more:Cufón or Google Fonts!
Related posts:
- How to: Display Adsense After The First And After The Any Post In WordPress Blog
- The 20 free fonts most used in the corporate design
- Beautiful Fresh Free Fonts for Designers
Fri, 11 Feb 2011 14:50:23 GMT
Tags: cufon, embed custom fonts, font, Fonts, google fonts, replacement, Tutorials,
Oceanside-Escondido E-Commerce | NOIDA E-Commerce | Bonita Springs E-Commerce | Stone Mountain E-Commerce | Ankeny E-Commerce | Coleraine E-Commerce | Rancho Cucamonga E-Commerce | Knoxville E-Commerce | Stevenage E-Commerce | Iowa Park E-Commerce |
cufon
embed custom fonts
font
Need E-commerce Design? Check out our member profiles:
Resorb Networks, Inc. offers a wide arrange of services, including Web Design, Custom Software, Web Hosting, e-Commerce Solutions, SEO and Dedicated Servers - amongst other products and services.
New York, New York US
We provide all types of custom design work including: websites, logos, business cards, brochures, advertisements, and pretty much anything else you can imagine.
Cartersville, Georgia US
Providing Website Design, Ecommerce Website Design (Online Stores), Graphic Design, Web Hosting, SEO (Search Engine Optimization), Web Development/Programming, in Nashville, TN and everywhere else.
Nashville, Tennessee US
White Ivy Design & Marketing: graphic designers & web programmers in Minnesota, transforming your ideas into powerful communications... Grand Rapids, Hibbing, Brainerd, Duluth, all of MN.
Coleraine, Minnesota US
Pro Websites Design offers website design and development, web hosting, search engine optimization and search engine marketing strategy, Ocala Florida
Ocala, Florida US
Mental Pixel Web Design and Development. Full Service Website Design and Marketing starting at $525, Located in Long Island, NY.
North Babylon, New York US
11 Best Questions & Contest Winners [MakeUseOf Answers]
Every Friday MakeUseOf Answers honors the Best Answer of the Week to reward the skills and time requ
10 Free MP3 Albums: Chilled Out Jazzy Hip Hop Edition [Sound Sunday]
Sound Sunday is a weekly feature promoting free album downloads Every edition invites you to explor
Codex Cloud: Upload Your Books & Read Them Online Along With Other People’s Uploads
Upload your books and read them in your browser or find new books to read online or download If yo
3 Hidden Features In Google Advanced Search You May Not Know About
Google is continually improving its search engine Not only do they work meticulously on the search
Cool Websites and Tools [November 4th 2011]
Check out some of the latest MakeUseOf discoveries Most of the listed websites are FREE or come wit
Best Of Windows Software: 15 New Apps Added
Our Best Of Windows Software page is gaining popularity If you haven t any idea what it is well
Hot Tech Deals – Seagate FreeAgent Go 1TB Portable Ext. HD $74.99 + more
We 8217 ve got a storage feast going on today with deals for Seagate HP and Western Digital extern
Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Opinion & Polls (76)
Cool Software Apps (76)
Social Media (66)
iOS (66)
Browser Tips & Tricks (66)
iPhone Apps (59)
Freebies (58)
geeky fun (58)
Photography (58)
iphone (55)
Google (53)
troubleshoot (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
