How to add Google Fonts in WordPress using Web Fonts API and theme.json
In this video, I guide you through mastering the power of the WebFonts API in WordPress using the theme.json file.
Learn how to seamlessly integrate web fonts, including Google Fonts, directly into your WordPress theme without relying on external servers.
By utilizing this approach, you not only gain control over your font assets but also ensure compliance with regulations like GDPR, as fonts are loaded locally.
Elevate your theme customization game and enhance website performance with this insightful tutorial. Watch now to unlock the potential of web fonts with ease!
************************************
SUPER DISCOUNT in all my courses at Udemy!
Get them NOW: https://www.codigowp.net/wordpress-co...
************************************
My new book, "The Web Developer's Guide to WordPress," is now available.
GET IT NOW, Kindle or Paperback format: https://www.amazon.com/dp/B088H2LDSJ
************************************
🚀 Some pieces of code used in this video:
1) theme.json
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"slug": "teko",
"name": "Teko",
"fontFamily": "\"Teko\", sans-serif",
"fontFace": [
{
"fontFamily": "teko",
"src": [
"file:./assets/fonts/teko/Teko-VariableFont_wght.ttf"
],
"fontStyle": "normal",
"fontWeight": "300 400 500 600 700"
}
]
}
]
}
}
}
Don't forget to like, share with other WordPress enthusiasts, and subscribe for more tips, tricks, and tutorials!
#wordpress #wordpresstutorial #themedesign #googlefonts #wordpresstheme #webdevelopment
00:00 - Introduction
02:26 - The problem with using web fonts
03:03 - Advantages of the WordPress Web Fonts API
04:12 - The theme.json file
05:46 - Choosing the Google font for the project
06:37 - TTF vs woff/woff2 fonts
08:02 - Creating and configuring theme.json
11:56 - Testing the added font
14:19 - Using the variable created by theme.json
15:10 - Conclusion