Better UX and WPO using variable fonts in WordPress
0 likes1,335 views
The document discusses the implementation and benefits of variable fonts in WordPress for enhancing user experience and web performance optimization. It covers various axes of variable fonts, such as weight, width, and optical size, along with practical CSS examples. Additionally, it provides resource links and acknowledges contributors to the subject at the WordCamp Kyiv 2019 event.
Better UX and WPO using variable fonts in WordPress
- 1. @acirujano | #WCKyiv Better UX and WPO using variable fonts in WordPressAna Cirujano | WordCamp Kyiv 2019 | 9th November
- 6. @acirujano | #WCKyiv OpenType Font Variations Microsoft + Google + Apple + Adobe =
- 10. @acirujano | #WCKyiv Standard Fonts Variable Font 19 requests 4 requests 1.25 MB 229 KB 9.89 s 2.49 s
- 11. 5 registered axes Weight, Width, Optical Size, Italic, Slant
- 12. Weight wght
- 13. @acirujano | #WCKyiv Source: Open Educational Resources for Typography Regular Faux Bold Real Bold
- 16. Width wdth
- 23. Italic — Slant ital — slnt
- 25. How to use variable fonts
- 26. @acirujano | #WCKyiv Can I use variable fonts?
- 27. @acirujano | #WCKyiv @font-face { font-family: “SourceSans”; src: url(source-sans-variable.woff2) format(“woff2-variations”), url(source-sans.woff2) format(“woff2”); font-weight: 1 999; font-style: oblique –90 90; font-stretch: 50% 200%; }
- 28. @acirujano | #WCKyiv .class { font-family: “SourceSans”, sans-serif; font-weight: 340; font-stretch: 80%; font-optical-sizing: auto; }
- 31. @acirujano | #WCKyiv REGISTERED AXES CSS PROPERTY CSS VALUES Italic (ital) font-style: italic italic or normal Optical Size (opsz) font-optical-sizing auto or none Slant (slnt) font-style: oblique + angle −90deg-90deg Weight (wght) font-weight 1-999 Width (wdth) font-stretch 100% is normal, 50% is ultra-condensed and 200% is ultra-expanded
- 32. Custom Axes
- 41. @acirujano | #WCKyiv .class { font-family: Decovar; color: white; font-variation-settings: “INLN” 285.094, “TSHR” 346.594, “TRSB” 786.377, “SSTR” 84.268, “TWRM” 200, “SINL” 84.268, “TOIL” 0, “TINL” 91.983, “WORM” 0, “wght” 400, “TFLR” 0, “TRND” 0, “SWRM” 0, “TSLB” 277.155, “TBIF” 0; } Custom Axes: inline, sheared, rounded slab, stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm, weight, flared, rounded, worm skeleton, slab, bifurcated.
- 42. Examples
- 48. Resources
- 56. Benefits of Using Variable Fonts
- 57. @acirujano | #WCKyiv Benefits of Using Variable Fonts Web Performance Optimization User Experience
- 58. дякую! ¡Gracias!