Category Archives: Web Fonts

FontShop Friday Five: Reboot

FridayFive0708Friday Five is back! We know you’re busy and the Internet is a crowded place, so we’ll try to give you a little reminder on Fridays of what’s going on out there. Below please find five recent FontShop-related threads that you may have missed.

TYPO San Francisco
Have you purchased your ticket to TYPO Rhythm yet? Save $100 if you buy before January 15!

On the FontFeed
Yves Peters starts the year off with his Type of Music of recently released albums.

Buyer’s Guide
Theresa shares the basics of Letters from Sweden’s EULA this week on the blog.

FontShop Newsletters
Perk up your inbox with our bi-weekly newsletters!  We highlight new fonts and promotions every other Wednesday so make sure to sign-up today.

Reflecting on 2013
With 2013 behind us, we haven’t forgotten to keep our resolutions in mind. Check out our top Type Resolutions for 2013.

Friday Five Fonts:  Terital United by Letterbox and Salvo Sans Black by Font Bureau

Buyer’s Guide: Webfonter

Try webfonts from FontShop on any browser for free with WebFonter. With thousands of fonts to choose from, test-driving a webfont is as simple as 1, 2, 3.

webfonter

Download and install the Chrome extension to preview a fresh look on even the most complex, javascript-heavy sites. Add the bookmarklet to your toolbar to preview webfonts in other browsers. Or use the launcher for just a quick try.

The best part is that WebFonter allows you to adjust, swap, and tweak font styles live in browser. Once you’ve picked the perfect fonts, you can buy a webfont license.

If you have additional questions you can always email FontShop’s Support Team for help.

Buyer’s Guide: Webfont pricing tiers explained

When licensing a webfont in EOT/WOFF formats, web licensing is based on the traffic the website it will be used for generates, or in other words, the website’s average pageviews per month. If you’re not sure whether or not you have a webfont in your cart, read our “Buyer’s Guide: Am I buying a webfont?” post to learn more about buying webfonts.

buyersguide-webfontpricingtiers

Once you have a webfont in your cart, you’ll notice that you won’t be entering the number of users you need to license (that’s generally for desktop licensing), but instead you’ll be choosing from three different pricing tiers: Personal, Business, or Professional.

A common question we get is: “My company’s website doesn’t generate more than 500,000 pageviews per month. Do I still have to purchase the Business tier or can I purchase the Personal tier?”

The answer is: choose the tier that best suits your needs based on the pageviews per month listed. These names — Personal, Business, and Professional — are just the tier names and do not refer to what type of website you will be using the fonts for. For example, if you’re a small business whose website traffic does not exceed 500,000 pageviews per month yet, choose the “Personal” tier.

If you need to license your webfonts for more than 50 million pageviews per month, please contact our Sales & Support team and we’ll get you set up with the licensing you need.

Buyer’s Guide: What formats are webfonts available in?

webfontformats2Typically, webfonts are available in EOT and WOFF formats — if you don’t know what these formats are, you can check out our What is EOT and WOFF? post.

FontShop‘s webfont selection is limited to the formats that the foundries supply and is not available in TTF or SVG formats. Under many of the foundries’ licensing terms, converting fonts to other formats for web use is not allowed. Always double-check a foundry’s End User License Agreement to be sure what is and isn’t allowed.

Buyer’s Guide: Can I install EOT or WOFF on my computer?

When you’re searching for fonts on FontShop, sometimes you’ll see webfonts in your search results. For example, if you search for “FF DIN” only, “FF DIN Web” may come up down the list, too:

buyersguide-eotwoff2

Keep in mind that desktop fonts and webfonts are not the same! Desktop licensing and web licensing are completely separate, so if you’re planning on using something like FF DIN for a big project that includes print materials and a shiny new website, you’ll need to license both the desktop version (OpenType or TrueType format) and the web version (EOT and WOFF formats).

buyersguide-eotwoffIf you have only purchased a webfont, you will not be able to install the webfonts on your computer. Webfont formats — EOT and WOFF — cannot be installed on Macs or PCs. A webfont will not work in desktop programs like InDesign or Microsoft Word.

If you need a version to install on your computer for mockups or wireframes (in Photoshop or Illustrator, for example), you can use our Plugin to test out fonts in Adobe® Creative Suite® — it’s free and easy to use!

Buyer’s Guide: Can this webfont be linked to Typekit?

Currently, you can only link webfonts from FontFont (also known as Web FontFonts) — webfonts that begin with “FF” in their name, such as FF Meta Web or FF Suhmo Web — to your Typekit account.

Hosting with Typekit

When you purchase a Web FontFont, you will be given a voucher code that links your Web FontFonts to your Typekit account. Send your Web FontFonts to Typekit by clicking on the link given to you when your purchase is complete. When you click on this link, you should be taken to a page that should look something like this:

At this point, you will be able to double-check to make sure you are linking the correct Web FontFonts to your Typekit account. You can then sign in to your Typekit account or create a new account.

If you don’t find a yellow box with a link to send your webfonts to Typekit when you’ve completed your purchase, you can still use webfonts. Remember, Typekit is completely optional and all webfonts on FontShop can be self-hosted!

Typographic Horrors: The Bolding That Wasn’t

Part five in our series, we hope you’re not getting nightmares:

He only noticed the effects of it over time, more like arsenic than the guillotine. Something so beautiful and young shouldn’t have to endure wearing such a horrific mask, when its real features are much bolder. But how could he have known? He wasn’t used to working in this platform and he realized his fatal error much too late.  He didn’t mean to inflict such a slow death on web typography.

Faux bolding and faux italic is a common crime for designers using webfonts. It happens by not specifying the font family properly. Instead of showing a true bold or a true italic, the browser or renderer will embolden or slant a regular weight. You can fix this issue by defining your font family properly in the CSS, including links to each font that will be required.

Graphic set in Confidential OT by FontFont

FF Chartwell Web Ready to Shake Up Online Infographics

Since FF Chartwell’s May release, the design world has been abuzz with accolades for its unique approach to infographic creation. With the recent FontFont release, web designers can now rejoice – FF Chartwell Web is here!

Get FF Chartwell Radar Web free!

FF Chartwell Rose Web

FF Chartwell Bars Vertical Web

FF Chartwell Lines Web

FF Chartwell Bars Web

FF Chartwell Pies Web

FF Chartwell Rings Web

Back in May we first introduced FF Chartwell’s nonconformist approach to creating charts and graphs: simply type in the numbers and let the font do the rest. Rings, rose, radar, pies, bars, lines, and vertical bar charts, all as easily styled as type, result automatically. Use FF Chartwell Web with static text or real-time data.

FontFont had to think creatively to work around the lack of OpenType support in most web browsers to keep FF Chartwell working to its users expectations. The end result is “more than just a font“:

All the chart drawing functions of FF Chartwell Web are provided as small JavaScript libraries. To create a chart you enter the values in a similar way to the desktop font and use HTML code to determine color and appearance.

Nobody likes bloated JavaScript libraries, so the JavaScript files are split into one base file and one file for each of the chart types. This way you never have to load more files than you really need. All FF Chartwell Web packages come with a demo page and example HTML code to help get you started. As with all Web FontFonts, you will also receive a WOFF and an EOT font called FF Chartwell Text Web Pro. Please note, that these only contain the alphabet part of FF Chartwell.

Web designers can test FF Chartwell Web on the FontFont How To site’s live demo. We can’t wait to see the beautiful infographic websites that FF Chartwell is bound to inspire. Please share your creations in the comments!

New Webfonts

Now that we’re getting new fonts in each week, it’s difficult to keep the webfonts from mixing in; So we’ve prepared a list of our latest fonts for web—available to license, download and serve yourself on your own webserver, or additionally within the FontFont range, from our partner Typekit. One easy way to find all the webfonts from a given foundry is by visiting the Webfonts page and selecting them in the Foundry drop-down menu. Anything you’re looking for but not seeing here? Let us know! Not all foundries have yet begun the process of converting their type to web formats, but with your encouragement, their webfonts are bound to hit the market soon.

Here are the latest webfonts, including some you may have missed this summer.

Letters from Sweden

Trim Web, Siri Web

Gestalten

Sinews Sans Pro Web

Schiavi Design

Sys 2.0 Web

URW

Filo Web, Fou Web, Ribera Web

ReType

Winco Web, Lavigne Text Web / Display Web

Neubauladen

NB Antiqua Pro Web

Hiba Studio

HS Alfaris Web

Also, you may not have noticed, but we’ve updated the look of this blog with some new webfonts. The headers are now in Evert Bloemsma’s FF Balance Web and the body text is Michael Abbink’s FF Milo Serif Web.

Buyer’s Guide: Can all webfonts sold on FontShop be linked to Typekit?

Currently, you can only link Web FontFonts — webfonts that begin with “FF” in their name, such as FF Meta Web or FF Suhmo Web — to your Typekit account.

Hosting with Typekit

When you purchase a Web FontFont, you will be given a voucher code that links your Web FontFonts to your Typekit account. Send your Web FontFonts to Typekit by clicking on the link given to you when your purchase is complete. When you click on this link, you should be taken to a page that should look something like this:

At this point, you will be able to double-check to make sure you are linking the correct Web FontFonts to your Typekit account. You can then sign in to your Typekit account or create a new account.

If you don’t find a yellow box with a link to send your webfonts to Typekit when you’ve completed your purchase, you can still use webfonts. Remember, Typekit is completely optional and all webfonts on FontShop can be self-hosted!

Buyer’s Guide: Am I buying a webfont?

Not all fonts on FontShop are available as webfonts. If you’re wondering whether you’re adding a webfont to your cart or not, here are a few things to look out for that will let you know you’re licensing the right kind of fonts:

1. Web Badges

When you do a general search for a font, several options may come up in the search results. Webfonts are easy to spot because they have Web Badges — a blue one in the upper right hand corner of a font listing and a gray one next to the price.

2. Font Name

Besides having badges to indicate if the font is a webfont, a webfont will have the word “Web” in its name.

3. Webfont Formats

Webfonts are usually available in two formats: WOFF and EOT. If you see anything else listed under Formats — like OT, TT, OT/TT, or PS — then you are not looking at a webfont!

4. Pricing By Pageviews

When you’re ready to checkout, there is one more way to ensure you’re licensing webfonts. Webfonts are priced based on pageviews per month, not the number of users who will be using the fonts. Instead of having to enter the number of users you need to license as you would with desktop fonts, you will need to choose a pricing tier based on the number of pageviews per month your website generates.

If you’re ready to get some webfonts, you can browse our selection of webfonts here!

Expanded Webfont Offerings at FontShop.com

In recent years, FontShop has been the place to acquire great Web FontFonts, but what about webfonts from other foundries? We’re excited to tell you that in recent weeks we’ve been adding oodles of webfonts to the catalog.

You can now find webfonts from:

You’ll notice a blue “web” icon as you browse the site.

For now only Web FontFonts purchased on FontShop can be used with Typekit. Please stay tuned to this blog for more updates and tools to help you continue to create beautiful websites.

Theresa’s Tip: A Designer’s Guide to Webfonts

You’ve heard about Web FontFonts, but if you’re still not sure what they are and how to use them then don’t fret. FontShop created a guide to get you up to date on what webfonts are and how to use Web FontFonts. Just go to our education page to view the guide online and if you need to brush up on your typography then we have guides for that too.

You can also download the PDF here.

Theresa’s Tips: Preview Web FontFonts on any website with FontFonter

FontFonter is free tool that lets you try Web FontFonts on any website. It was introduced almost two years ago and continues to be one of the easiest ways to comp an existing site with Web FontFonts. Just go to FontFont.com, type in a website, and FontFont It! Here are more tips and examples to help you out.

Theresa’s Tips: Optimize Web FontFonts with Subsetter

FontFont Subsetter is free tool that allows you to optimize your licensed Web FontFonts by stripping out glyphs and data that you don’t need. All you have to do is upload your licensed Web FontFont on Subsetter, choose how you want to customize it, then download your new web font. In three easy steps you’ll have leaner file that will help make your website faster, while optimizing bandwidth usage, and reducing high-traffic cost. Try it today!

Follow

Get every new post delivered to your Inbox.

Join 61,742 other followers