1) Understanding Fonts : Fonts for Advanced #WebDev
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 major role in our day to day life by make us understand creative content like banners or bus stops or whatever. Similarly in websites too , they play major role in making good understanding and connection. Typography plays 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 Operating System , In developer words these are called Fallback Fonts, these generally include fonts like Times New Roman, Arial, and Courier.
- Web fonts: These are fonts that are generally custom designed for brand or followed by designers other than traditional fonts found in Operating System and must be downloaded by the browser before they are displayed.
Find web-safe fonts here : https://www.cssfontstack.com/
What ar 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.
In my next post , i will be writing about Font loading in browsers , by that above line will be clear.
Optimising web font delivery
1.Prioritize based on browser support
2.Choose only 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 fonts 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 famous and largest provider 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 like they are used online.
- Fonts.com these are kind of marketplace for many premium fonts , which we can find if they are not available with 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 quick start for personal portfolio.
- Type scale — this website helps in creating our own typography and easy to write common styles
- Whatfont — chrome extension for identifying fonts on web pages.
Next post :
https://medium.com/@sandeep-machiraju/2-font-loading-fonts-for-advanced-webdev-901a57d5a288
Thank you ! I hope this post find insightful ! Before you go: