How many times has it happened that you designed your website, only to have it not render the way you expected? Unfortunately, there are only a few fonts that are safe to use. If you thought you could just pick up a “pretty” font from your computer and use it on your website, you’re wrong! You have to do the required research first. Let us make this a little easy for you!
Some fonts are pre-installed by many operating systems – known as web safe fonts. However, not all systems will have the same fonts installed. To make things convenient, you can use a web safe font stack to choose several fonts that look similar, and are installed on the systems that you want to support.
As recommended by awwards.com, some of the top recommended fonts from Google Web Fonts are given below. Their technical and visual characteristics make them more readable and compatible with a variety of devices and operating systems.
Top recommended fonts from Font Squirrel are:
If you want to use fonts other than ones that are pre-installed on the system, you can opt for CSS3 and use Web Fonts.
Unlike web safe fonts, web fonts are not pre-installed on your system. These fonts need to be downloaded by your browser while rendering the webpage, and then applied to your text.
However, using these web fonts come with a few drawbacks:
To solve the issue (b), you can use a font stack, similar to the web safe font stacks, but include a web font as the first font of the stack. For any reason, if the browser is unable to use the web font it will fall back on the web safe fonts in the stack.
The font family property of a text should hold several font names as a “fallback” option. In this manner, if the browser does not support the first font, it tries the next font, and so on.
Ideally, you start with the font of your choice gradually ending with a generic family. This allows the browser to pick a font similar to the required font from the generic family (if no other fonts are available).
In basic CSS format, it can be defined like this:
font-family: Arial, Helvetica, Sans-Serif;
The best way to ensure this, however, is to upload the required font to your website server and use it. This way it will always show on the client browser.
TIP: With the new @font-face rule, web designers are no longer restricted to using the “web-safe” fonts. You only have to define a name for the font (e.g. myFirstFont), and then point to the font file.
Finding the right font family can be difficult. More challenging is finding a font family that can be used legally on the web.
If you need a free font, you can look through the library on fontsquirrel.com. This website not only offers a font generator, but provides fonts that are completely free for commercial use. The fonts are of high quality too!
Another alternative for free fonts is the Google Font Directory (code.google.com/webfonts). It is quite simple to use the fonts they offer using the API available. One benefit of using these is minimal load time as the fonts are hosted by Google itself.
Whichever option you choose, always remember to provide a fallback font! There could be a server problem, and the browser might not be able to retrieve the custom font. Using font stacks, you can provide a fallback to a font you know is available.
If Font Squirrel or the Google Font Directory is not able to provide the font you are looking for, look out for other services, but be aware of licensing formalities. Services like FontDeck and TypeKit enable you to choose from a range of fonts, all of which are tweaked for better legibility on the screen. Both services allow you to create free accounts with some limitations, and offer various pricing packages.
If you thought web design was as simple as print, we are sorry to burst your bubble – your font choices are, unfortunately, limited. But that cannot stop you from making mind blowing designs, can it? Apply some good color choices, good framing, follow the guidelines given above and you are all set.
Online marketing acts as a paradigm for other web marketing programs. Businesses leverage digital marketing channels such as search engines, social media, email, personal websites, and online advertising to fulfil their brands’ marketing motives, product awareness, user engagement, social connection, and much more. In reality, digital marketing strategies are routes to meet digital marketing objectives. […]
Whether you own a small company or you are an entrepreneur, it is crucial to stay up to date with digital media developments to expand your business and to ensure your progress. Digital Evolution is, in reality, an inevitable phenomenon. So if you don’t adjust, undoubtedly you’ll be left behind. As Brian Solis puts it, […]
The new social era in digital marketing has accepted influencer marketing as an advanced strategy to convert more viewers to customers in 2020 and online brands also pay a lot of attention to influencer marketing.
Join us for a cup of coffee!