Using variable fonts in WordPress we can get the texts of a website to adapt to the context of the user, in order to get more readable and attractive texts, achieving great performance, without sacrificing the loading speed. Variable fonts can change their properties -such as width or weight, for example- using just one file! We will see how you can use it in WordPress (CSS code) and all the advantages they have comparing to standard fonts. We will also go over real examples of how to create and apply variable fonts.

1. @acirujano | #WCKyiv
Better UX and WPO
using variable fonts
in WordPressAna Cirujano | WordCamp Kyiv 2019 | 9th
November

2. @acirujano | #WCKyiv

3. @acirujano | #WCKyiv

4. @acirujano | #WCKyiv

5. @acirujano | #WCKyiv

6. @acirujano | #WCKyiv
OpenType Font
Variations
Microsoft + Google + Apple + Adobe =

7. @acirujano | #WCKyiv
zeichenschatz.net

8. @acirujano | #WCKyiv

9. @acirujano | #WCKyiv

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

14. @acirujano | #WCKyiv

15. @acirujano | #WCKyiv

16. Width
wdth

17. @acirujano | #WCKyiv

18. @acirujano | #WCKyiv

19. @acirujano | #WCKyiv

20. Optical size
opsz

21. @acirujano | #WCKyiv
Optical size variations. Source

22. @acirujano | #WCKyiv

23. Italic — Slant
ital — slnt

24. @acirujano | #WCKyiv
WordCamp Kyiv
WordCamp Kyiv
Baskerville MT Std

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;
}

29. @acirujano | #WCKyiv
@import url(‘https://fonts.googleapis.com/css2?
family=Hepta+Slab:wght@1..900’);
@import url(‘https://fonts.googleapis.com/css2?
family=Crimson+Pro:ital,wght@0,200..900;1,200..900’);
Source

30. @acirujano | #WCKyiv

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

33. @acirujano | #WCKyiv
Custom Axes

34. @acirujano | #WCKyiv
Custom Axes
Source

35. @acirujano | #WCKyiv
Custom Axes
Source

36. @acirujano | #WCKyiv
Custom Axes
Source

37. @acirujano | #WCKyiv
Custom Axes
Source

38. @acirujano | #WCKyiv
Source

39. @acirujano | #WCKyiv

40. @acirujano | #WCKyiv

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

43. @acirujano | #WCKyiv

44. @acirujano | #WCKyiv
Fuente

45. @acirujano | #WCKyiv

46. @acirujano | #WCKyiv
Fuente

47. @acirujano | #WCKyiv

48. Resources

49. @acirujano | #WCKyiv
Axis Praxis

50. @acirujano | #WCKyiv
v-fonts

51. @acirujano | #WCKyiv
play.typedetail.com

52. @acirujano | #WCKyiv
variable-font-experiments.glitch.me

53. @acirujano | #WCKyiv
Wakamai Fondue

54. @acirujano | #WCKyiv
Jason Pamental

55. @acirujano | #WCKyiv
Mandy Michael

56. Benefits of Using
Variable Fonts

57. @acirujano | #WCKyiv
Benefits of Using Variable Fonts
Web Performance Optimization User Experience

58. дякую!
¡Gracias!