The WP Wednesday Podcast
Using Fonts in WordPress
Most websites have images. Some have videos. Others have database connections, feeds from other sites, shopping carts, and others item.
But it’s fair to say that EVERY websites has fonts. From the classic Times New Roman, to newly launched fonts like Shapiro, fonts are text stylings used to display written text on sites.
There are many ways to edit font types but today we’re going to talk about how you can add or change the fonts on your site.
Fonts in WordPress
Fonts in WordPress are a great way to stylize your website. Changing the font can make a site look very corporate or newsy, or fun and light. Therefore fonts can make a site hard to read or amateurish, so choose wisely.
Most sites use primarily two fonts, one for headings, and one for body text. There are often other fonts used for beneath images, advertisements, and other special cases, but two is the base number needed.
Need some suggestions on font pairings for your site? Check out Font Pair to see fonts paired together and how they will look in WordPress.
Finding Fonts
There are hundreds of fonts in WordPress available online for free or at a very low cost.
Make Your Own Font!
A site called Font Squirrel will take a font you own, upload it to the application, and edit to your needs. Add tails to letters, increase the boldness,
Use the Fonts in WordPress
Once you’ve decided on which fonts will work on your site, it’s time to implement them. There are many ways including CSS, themes and plugins.
- Themes Some themes already have a customizer in their options to set default heading and paragraph fonts. This makes selecting and changing them extremely easy, as you only have to edit in one place and it should universally change the pages.Of course if any changes were made inside a page they may still hold the values. I use the DIVI theme and changing fonts sitewide is very simple, and using a visual builder it’s quick to see a change in both font style and size will affect the site.
- Plugins Like setting a font in WordPress in the theme customizer, plugins offer an easy way to change fonts sitewide. Most will interface directly with Google Fonts and other depositories to bring in the fonts and other styles.
- CSS The most powerful, the fasted loading time, and maybe the most difficult way to adjust your fonts is through CSS. CSS is some instructions on how your WordPress and other site display text, images, page width, navigation and many other options on the site.
To set the fonts and other properties in CSS you will need the following
1- Downloaded font files, or in some cases have code from a depository (like Google Fonts) which can provide an “@import” instruction to pull the files needed in your CSS page/site.
2 – Access to edit the WordPress files to bring in the fonts through CSS. Sometimes this will be a custom CSS file. Other times it will be a specific file in the WP theme. Find out where to change on your page.
3- Sometimes changes to fonts can be made in the header.php file. Place the font import in the <HEAD></HEAD> portion of the HTML.
4- If you host the font files locally, the “@font-face” CSS command can be used.
See more ways and even get specific CSS and HTML code to add fonts in WordPress by visiting this article on WebsiteSetup.org
WORDPRESS NEWS FOR EPISODE 120
- WP Beginner – How to Change MX Records For Your WordPress Site
MX Records are where your email is directed. Often times it is the same server as the web host, but more advanced sites use an ARecord host (website), and MX Record host (mail) at different locations. This article gives some great instructions on why, and how, you would change the server records.
- WP Lift – How to Optimize Cumulative Layout Shift on WordPress
This one might be slightly advanced. If you’ve been using page scoring sites like GTMetrix or Page Insights lately, you’ve probably noticed one of the big items listed as a negative is Cumulative Layout Shift.
It’s when the code is loading and the site layout flashes as images, videos and other content fall into place on the site. It can be distracting, but there are ways around it. If the site loads quickly it may not be an issue, but if you’re concerned about this the page gives some great ideas on how to minimize the shift.
UPDATE : You can use legacy reporting from GTMetrix ( https://gtmetrix.com/blog/how-to-test-with-legacy-gtmetrix-reports/ )F
- Search Engine Journal – WordPress 5.6 Guidance on PHP 8 Compatibility
The most recent version of PHP (7.4) doesn’t reach it’s projected EOL (end of life) until Dec 2022, so if you’re running near the most recent version everything should be fine… for now. But if you like to live on the technical edge, PHP 8 is starting to roll out and WordPress 5.6 will be compatible in beta form, meaning running it on a production website is risky at best.
There are bound to be issues with the core, and almost certainly will be with themes, plugins and even custom code. So implement at your own risk.
Recent Comments