TTF vs OTF vs EOT vs WOFF vs WOFF2 vs SVG | Font Files and CSS Font Face Explained

How to use font files in css? How to add font file in css? How to use external font in css? How to use custom font in css? Which is better TTF or WOFF? What is WOFF2 font file? Which font file to use in CSS 'font face' rule? In this web fonts tutorial I have explained all these questions, web fonts file formats and font file formats in detail. Learn to use font face rule. If you have a custom font file, how will you create CSS font-face rule using that? Lets say you have a font file in TTF TrueType format. How will you create font-face in CSS using that?

Most fontend developers do this. They go to transfonter site, add font, check options for ttf, eot, woff, woff2, SVG, hit convert, download output, copy fonts in project, copy generated font-face CSS in project's CSS file and thats it. In this way we have font face using custom font file. It is supposed to be cross browser compatible, cross device compatible because we have included all font file formats to ensure maximum compatibility across all web browsers and devices.

THIS IS WRONG.

You are adding too many and unnecessary font files or assets in your website. But In CSS3 font-face, everybody uses multiple font types like ttf, eot, woff, woff2, and svg. So which one to use? Or should we use all font formats for maximum compatibility? This video is about understanding web fonts and getting the most out of them.

- Embedded OpenType Font (EOT)
EOT is a legacy format developed by Microsoft. Only supported by Internet Explorer, it is needed for Internet Explorers older than IE9 and it is served uncompressed. So it has large size.

- TrueType Font (TTF)
TTF font file has larger file size. It is developed by Microsoft and Apple in the 1980s.

- OpenType Font (OTF)
OpenType font is a joint effort between Adobe and Microsoft. OTF fonts can be used by Mac and Windows operating systems.

TTF and OTF are normal old fonts or full system fonts with large file size.

- Scalable Vector Graphics font (SVG)
SVG is not great for body text. You can not select individual characters, words, or any custom selection in SVG font. You can only select the whole row or paragraph of text. If you are targeting iPhone and iPad users, SVG fonts can be helpful there. SVG fonts are allowed by version 4.1 and below of Safari for iOS.

- Web Open Font Format (WOFF)
WOFF is collaboration by the Mozilla Foundation, Microsoft, and Opera Software. Developed in 2009, it is wrapper format for TrueType and OpenType fonts. WOFF throws away bits that are critically important for system installation, but irrelevant for the web. Woff is a compressed (zipped) form of the TrueType or TTF font and is supported by all modern browsers. It is small and can be delivered over the network like a graphic file. Compressed fonts load faster in browser.

WOFF2 or WOFF 2.0 (Web Open Font Format 2.0)
WOFF 2.0, is based on the Brotli compression algorithm. WOFF2 or WOFF 2.0 is an update to the original WOFF format and is the next generation of WOFF. Developed by Google, it is the best format for the web, because it offers smaller file sizes and better performance for modern browsers. The WOFF2 format is 30% more compressed than original WOFF format. So it offers 30% reduction in file size.

*WOFF and WOFF2 are lighter than TTF font files*

So what is the conclusion?
Which is better, TTF or WOFF?
Do you need WOFF and WOFF2 in CSS font face?
Do we need all font formats in CSS font-face in CSS?

Answer is:
SVG and EOT are considered dead formats for fonts.
TTF and OTF are full system fonts and should not be used in web development projects.
Only use WOFF2, or if you need legacy support, use WOFF. Do not use any other format for fonts.

WOFF and WOFF2 have got all the support we need. So conclusion is do not use extra fonts that are not needed by web browser.

- You Are Using Fonts in CSS the WRONG WAY!!! Single Font Face Can Do it All
https://youtu.be/sUX3V0ekfmk

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

⚡Channel: https://www.youtube.com/@webstylepress
⚡Website: https://www.webstylepress.com
⚡FaceBook: https://www.facebook.com/webstylepress
⚡Twitter: https://twitter.com/webstylepress
⚡GitHub: https://github.com/webstylepress
#fontface #fonts #fontformats #woff #woff2 #eot #ttf #svg #otf #css #css3 #typography #WebStylePress #WebDevelopment

Тэги:

#woff_support #ttf_vs_woff #which_is_better_TTF_or_WOFF #woff_supportttf_font #ttf_or_woff #woff2_vs_woff #woff2_support #ttf_vs_woff2 #Do_I_need_WOFF_and_WOFF2 #eot_font #woff_or_woff2 #woff2_font #What_is_WOFF2_font_file #woff_font #ttf_vs_otf #ttf_to_woff2 #woff2 #woff #otf_font #SVG_font #font_face_css #font_face #font-face_css #css #web_fonts #web_fonts_tutorial #web_fonts_file_formats #font_file_formats #font_files_and_css_font_face #which_font_file_to_use_in_css

Скачать видео