A secret! We love fonts at SiloCreativo… We think they are the key to success of a good web design. They are responsible for managing the content and offer it to the visitor in a clear and legible way adapted to the preferences defined by it in the browser form; fonts are ultimately the fuel of a website. Without them there is no way to start, so look after them! 🙂
However, to work with them on web design you need to know some concepts to meet a series of “technical” priors. If you come from the world of graphic design they will be perfect for you. Knowing that a desktop font is not the same as a web font is the first rule!
Web Fonts vs Desktop fonts: Formats and uses
The main difference between a Desktop Font and a Web Font is that the first one is designed to be installed on your computer and is ready for use in applications also installed on your system (like Word, Photoshop, Illustrator…) They usually have a .otf .ttf, or .ps1 extension corresponding with OpenType, TrueType or PostScript.
On the other hand, a Web Font is a font especially designed for use in web pages, and is loaded with CSS @ font-face declaration. This makes the user’s browser downloads web fonts and renders text correctly.
A web font is usually served in four formats, TrueType, WOFF, EOT and SVG. Only with four formats browser compatibility is achieved, as each browser uses a format. 😉
Another very important feature about fonts in web design: web fonts cannot be installed in the system for use in applications, and the same happens in reverse. They have different formats.
However, there are some standard font calls “Safe WebFonts” that just with CSS are rendered correctly. No any TrueType, WOFF, SVG or EOT file is required. But the list is short and limited:
Georgia
Palatino Linotype
Book Antique
Times New Roman/Times
Arial/Helvetica
Comic Sans
Impact
Lucida Sans Unicode/Lucida Grande
Tahoma/Geneva
Trebuchet
Verdana
Courier New
Making a Font into a Web Font
Many desktop fonts are usually available in its version of web font, and so vice versa. An example of this is the Google Fonts, a Web Fonts served by Google, where you can download desktop fonts (there are always slight variations, almost imperceptible), and use them as a web font in a website.
If this is not so, there are tools to convert desktop fonts to a Web Font (and vice versa). The best option is offered by Font Squirrel converter. The result is quite similar to the desktop font, but we have to adjust the sizes later in the CSS (you can give a reference source for the height of it).
Not all desktop fonts are convertible to Web Fonts; most of them because of their marketing rights. This is the case for some fonts that come with Windows, whose rights belong to Microsoft, so they have a limited use as Web Font.
How to use a Web Font in Web Design
Through the CSS @import statement, we will load the font files from the location or folder that we have uploaded to our server. If you use a Google Font, the process is somewhat easier, since you can load it from the Google CDN. If it is your own web font, you will need a little more knowledge, but it is not that complicated.
If you work with WordPress, congratulations! because thanks to the amount of plugins there everything will be easier, but you can also choose to do this manually editing the CSS in your theme or template. Here is a tutorial of best practices (in Spanish) and how to add CSS changes correctly to WordPress.
Now it is your turn! Find a good combination of Fonts
Once you do it, you will see that it is not that complicated. You just have to find a good combination of web fonts for a stunning result! Here you have good resources and tips on combinations:
• Basic Colour combinations between text and background colour
• What typeface should we choice in our design? (In Spanish)
• 7 Google Fonts Combinations you can copy and Use
• 10 tips for combining typefaces
• 5 Serif Google Fonts combinations
• 5 Sans Serif Google Font combinations
And if you have not yet decided on any particular web font, here you have some freebies on typography for free download.
• 5 free downloadable Retro Fonts (In Spanish)
• 5 Free Resources to give effect to our font
• 5 Fonts with a “Handwritten” style for Download (In Spanish)
• 3 Free fonts for messages on Images
• 3 Creative Fonts for powerful messages
• The Silo Creativo’s Fonts (In Spanish)
I hope they were useful for you, but remember, always use a few fonts (the excess can overload your website) and always think about the readability of the user. A good UX should always be the goal in choosing any font. As a reminder:
Keep always these 10 rules about typefaces. We are sure you will not go wrong when making a combination! I hope you found the article and resources useful 🙂
I learned a lot from this article. I LOVE fonts and was curious as to whether or not I needed a web font or not. I look forward to reading more of your articles. Anyway, I was wondering which font this is on your blog? I really like it a lot. Thanks!
Hi Jackie,
thanks for your words. Nowadays we are using a combination between Roboto for body text and Roboto Slab for titles. Both of them are Google Fonts.
Thanks again!
Interesting article! I work at a software company that incorporates PDF forms into an application that users install on their PCs. The forms come from different sources and we’ve found that some forms included fonts that were not standard Windows fonts. This would sometimes lead to problems for PCs that didn’t have the non-standard font already on the system. The text would become a mix of symbols, as the system tried to convert it to a standard Windows font – making the form unusable. It was such a problem that we decided to reformat each form in Word, using only the Times New Roman typeface, before converting it back to PDF and loading it into the software.
The issue w/how those fonts would display onscreen, lead to us using Windows-only fonts in all other design (websites, email, etc.). Is it true that if we use web fonts for websites (and the website has the @font-face CSS), that the user’s browser will download the fonts to the system – and allow us to safely use non-standard fonts?
Thanks!
Hi MK, thanks for your comment!
Yes, dealing with fonts in PDFs or DOCs is very frustrating. Each computer could be a different reader and of course fonts..
About your question, unfortunately visiting a website that use a custom font does not mean that the computer download the fonts to the system. Of course the browser has to download it in order to render the website, but they downloaded font does not go to the Fonts folder in Windows or the equivalent in Mac or Linux. It goes to a temporal folder.
Furthermore, each browser uses a different extension for the font (EOT, TTF, WOFF or even SVG). Some of them are not valid as desktop font.
However I think you can embed a non-standard font file in a PDF file…I am not sure how to do, but I think it is possible.
Thanks again!