Introduction :

The most important thing we observe in daily life is text, it basically gives immediate meaning to the object we are viewing, it plays a major role in our day-to-day life by making us understand creative content like banners or bus stops or whatever. Similarly in websites too, they play a major role in making good understanding and connections. Typography plays a major role in web design.

Good design, branding, readability, and accessibility all depend on typography.

Website designers have been using custom typefaces for many years. Because custom fonts are not included in the operating system, they must load with the site and show consistently on all platforms. Fonts often come as huge files that take a long time to load.

What are Fonts?

A font is the specific style of text that's printed on a page or displayed on a computer screen. It is a graphical representation of text that may include a different typeface, point size, weight, color, or design.

There are two basic types of fonts used on the web:

• Web-safe fonts: These are standard fonts that come along with the Operating System, In developer words these are called Fallback Fonts, these generally include fonts like Times New Roman, Arial, and Courier. Find web-safe fonts here: https://www.cssfontstack.com/

• Webfonts: These are fonts that are generally custom-designed for a brand or followed by designers other than traditional fonts found in the Operating System and must be downloaded by the browser before they are displayed.

What are the different formats of Web Fonts?

There are currently four main font formats used on the web.

• TrueType Font (TTF): Developed in the late '80s by Apple and Microsoft. It is the most common font format.

• Web Open Font Format (WOFF): Font format developed in 2009 for use in web pages. WOFF is OpenType or TrueType that has been compressed and with additional metadata.

• Web Open Font Format (WOFF2): Better compression than WOFF.

• Embedded Open Type (EOT): It is designed by Microsoft as a compact version of OpenType fonts that can be used as embedded fonts on websites.

96% of browsers support the WOFF2 format, according to Can I Use. WOFF2 compresses data roughly 30% more effectively than WOFF.

If you need to support older browser versions, fall back to a web-safe font, such as Arial for the rest.

Optimizing web font delivery

1. Prioritize based on browser support

2. Choose only the styles you need most sites only need a normal style and a bold style

   

3. Character sets or Font Subsetting
   Subsetting is nothing more than removing unused characters from the font files. Unused characters are normally characters from languages that you don’t use or special characters that your website or app may not need but are often embedded in font files. By subsetting, you can potentially get up to a 50% reduction in file size.

4. Host fonts locally or prefetch

5. Store in localStoragewith Base64 encoding A browser's native cache gets flushed quite frequently, especially on mobile devices. So by saving to localStorage, the file gets cached persistently.

Popular Web Font Providers :

Web fonts can be free or you can pay for them, usually via a subscription. Some popular providers are:

• Google Fonts. It is one of the famous and largest providers of free online fonts and all of their fonts are available for download to your computer, allowing you to use the same fonts to produce offline documents as they are used online.

• Fonts.com these are kind of marketplace for many premium fonts, which we can find if they are not available from free providers.

• fontfabric is a font designer that offers expensive fonts for usage online and as web fonts. Even though you'll have to pay for them, using these will give you something more unique than using Google fonts.

Tools :

• Font squirrel Webfont Generator - to subset and base64 encode your fonts into one final file.

• Font pair - this website is good for a quick start for a personal portfolio.

• Type scale - This website helps in create our own typography and easy-to-write common styles

• Whatfont — chrome extension for identifying fonts on web pages.

Thank you! I hope this post is insightful! Before you go:

🤝 Connect: LinkedIn | Website
❤️ for the article
Follow / Subscribe for more “advanced web dev” articles

This post is also at Substack | Medium

Next post :