Slowly but surely we’re starting to see some solid changes in the ability to use typefaces other than the limited “web-safe” fonts in web sites. Web designers have had to play it very safe with font choices in the past in order to ensure the text is SEO friendly. The alternative to using web safe fonts was to use an image with some alternative text, or to use Flash. But we know that updating images and Flash can be a pain, compared to simply changing text on the page.
Typekit is a service which hosts fonts and serves them in an optimized, secure way and now that technology is in place, many type foundries are signing up to provide web-optimized fonts.
Fontshop have announced thirty of their fonts have been specifically re-designed for web use, in conjunction with Typekit, which they are calling Web FontFonts. The fonts have been optimized for display on almost any screen. They are delivered in formats supported by Internet Explorer and Firefox. The formats being EOT Lite and Web Open Font Format (WOFF). For Chrome and Safari users, FontShop are offering a free Typekit hosting option.
They’re are some beautiful fonts available in this new set. Here’s a look at a few.
How To Buy The Fonts
The web fonts from FontShop come in formats that work only on websites and not in desktop apps but they will not have any sort of DRM to prevent unauthorized use. The web fonts will be made available using a new licensing model that differs from the “per-user” licensing that currently exists for offline fonts. The licensing will be based on monthly page views and the customer will choose what they believe is the right license for the number of page views their site has. This will undoubtedly be considered controversial but as exclusive web-only fonts are a fairly new concept, this is the right time to start testing these models and tweak accordingly.
You can read more about the fonts available on the FontShop blog.
Do any of these fonts interest you for use on the web?Frequently Asked Questions about Web Fonts and Typography
What are the key differences between web fonts and desktop fonts?
Web fonts and desktop fonts, while similar in many ways, have some key differences. Web fonts are specifically designed for use on the web, meaning they are formatted to be read and displayed by a web browser. They are typically hosted on a server and are accessed by a website when it loads. On the other hand, desktop fonts are installed directly onto a computer and can be used in any application that supports font usage, such as Word or Photoshop. They are not designed to be used on the web and may not display correctly if used in this way.
How can I choose the right font for my website?
Choosing the right font for your website can be a complex process, as it involves considering factors such as readability, mood, and brand identity. A good starting point is to consider the purpose of your website and the message you want to convey. For example, if your website is for a professional business, you might choose a clean, simple font that conveys a sense of professionalism. On the other hand, if your website is for a creative project, you might choose a more unique, artistic font.
What are the most popular web fonts?
The popularity of web fonts can vary greatly depending on the context and the audience. However, some web fonts have gained widespread popularity due to their versatility and readability. These include Arial, Verdana, Times New Roman, and Georgia. More recently, Google Fonts has become a popular source of free, high-quality web fonts, with Open Sans, Roboto, and Lato being some of the most popular choices.
How can I use web fonts on my website?
There are several ways to use web fonts on your website. One of the most common methods is to use a web font service such as Google Fonts or Adobe Fonts. These services host a wide range of web fonts and provide you with the necessary CSS code to include them on your website. Alternatively, you can host the web fonts yourself by downloading them and uploading them to your server. However, this method requires more technical knowledge and may not be suitable for beginners.
Are there any legal issues I should be aware of when using web fonts?
Yes, there can be legal issues associated with using web fonts, particularly if you are using them commercially. Many web fonts are protected by copyright, and using them without the proper license can result in legal action. Therefore, it’s important to always check the license of a web font before using it. Some web font services, such as Google Fonts, offer a wide range of free, open-source fonts that can be used without restriction.
Can I create my own web font?
Yes, it is possible to create your own web font, although it requires a certain level of technical knowledge and design skill. There are several software tools available that can help you create your own font, such as FontForge and Glyphs. Once you’ve created your font, you can convert it into a web font using a web font generator.
What is the impact of web fonts on website performance?
Web fonts can have a significant impact on website performance. Because they need to be downloaded by the browser, they can increase the load time of a website, particularly if multiple web fonts are used. Therefore, it’s important to use web fonts sparingly and to optimize them for performance. This can include techniques such as subsetting (removing unused characters from the font file) and compression.
How can I ensure that my web fonts display correctly across different browsers and devices?
Ensuring that your web fonts display correctly across different browsers and devices can be a challenge, as different browsers and devices have different levels of support for web fonts. One solution is to use a web font service, which will automatically serve the correct format of the font for the browser or device that is accessing your website. Alternatively, you can use the @font-face CSS rule, which allows you to specify multiple formats of the font to ensure maximum compatibility.
What are the best practices for using web fonts in responsive design?
When using web fonts in responsive design, it’s important to consider how the font will scale on different screen sizes. You should ensure that the font is readable at both small and large sizes, and that it doesn’t cause layout issues when the screen size changes. Using relative units (such as ems or percentages) rather than absolute units (such as pixels) can help to ensure that your font scales correctly.
Can I use web fonts in email?
While it is technically possible to use web fonts in email, it can be problematic due to the varying levels of support for web fonts in different email clients. Many email clients do not support web fonts at all, while others have limited support. Therefore, it’s generally recommended to use a fallback font that will display correctly in all email clients.
Jennifer FarleyJennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.
