Some WordPress sites, including intranet sites, cannot rely on third-party font services like Google Fonts and Adobe Edge Fonts. In these situations, using a locally hosted web font is preferred. This video tutorial shows you how to create your own locally hosted version of Google Web fonts and add them to your custom WordPress theme.
- [Josh] When we use Google Fonts on a site…or in a theme…we're really just calling for a style sheet…that Google autogenerates…and then bringing in all the font files from Google.…So let's take a look at how that actually works…and see if we can improve it.…If I inspect any element on the page,…you can see under computed…that that element will have some font applied…in this case PT Serif…but to really see what's going on we have to…go to sources.…From here we can see all the sources that are…currently in play on the page…and this tells me all the files that are…being used and where they live…and you can see we have these two entries…font Google APIS and fonts G static.…
So if I open the fonts Google APIs…this is a style sheet that we generated a URI for…and here inside the style sheet you'll see for each…of the @font face declarations…so for instance PT Serif, normal, weight 400…there's a call to the actual font file…and it's right here…Fonts.gstatic.com and then PT Serif…and a whole bunch of stuff.…So what's happening is for each of the font weights…
Author
Morten Rand-Hendriksen
Released
2/6/2017- Setting up a WordPress development environment
- Getting and installing _s
- Automating theme development with Gulp
- The WordPress template hierarchy
- Setting up the basic theme
- Registering and displaying menus
- Applying styles to menus
- Creating conditional layouts
- Working with the comments template
- Working with featured images
- Working with widget areas, or sidebars
- Working with index templates
- Working with static pages
- Adding features to the Customizer
Skill Level Advanced
Duration
Views
-
Introduction
-
Welcome58s
-
-
1. Set Up a WordPress Development Environment
-
Get and install _s3m 48s
-
2. The Design to Development Process
-
Modular, mobile-first design2m 19s
-
Underscores: An overview1m 50s
-
-
3. Set Up the Basic Theme
-
Configure the theme info5m 32s
-
Create responsive typography6m 19s
-
-
4. Build the Header
-
Style the default header8m 3s
-
-
5. Create Menus
-
Apply styles to the menu6m 33s
-
6. Configure the Single Post Template
-
Apply CSS to the post header6m 25s
-
Style image galleries1m 56s
-
Configure post navigation6m 19s
-
7. Create Conditional Layouts
-
Planning an unusual layout1m 49s
-
-
8. Work with Comments
-
Apply CSS to comments5m 41s
-
9. Work with Featured Images
-
10. Work with Widget Areas (Sidebars)
-
11. Work with Index templates
-
Customize the excerpt output3m 51s
-
Highlight sticky posts4m 57s
-
Customize archive pages5m 51s
-
12. Work with Static Pages
-
13. Advanced Features
-
Add SVG icon functionality9m 16s
-
14. Adding Features to the Customizer
-
Get to know the Customizer4m 20s
-
-
15. Back-End Customization
-
Add a screenshot2m 44s
-
Conclusion
-
Going further with WordPress2m 15s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Preconnect custom web fonts for improved performance