Presented by Benjamin Bradley on 07/02/2018 2:00pm
For many WordPress site users and developers, the ability to add custom fonts can be an overwhelming endeavor.
You might be thinking about simply using a quick WordPress plugin or slapping some "import" code into your theme's stylesheet and believe that it is enough.
But for a truly optimized and fine-tuned website, we need to maintain better control over where, when, and how our collection of fonts are used.
In this webinar, we will be walking through the step-by-step process of adding fonts to WordPress websites the RIGHT way regardless of theme or plugins installed.
Fonts are Awesome... Really!
We'll share some pro tips and best practices to help anyone, from a novice freelancer to the most seasoned veteran freelancer, harness the power of fonts and font icons.
As long as you can determine what and where your stylesheet is and have a basic understanding of CSS, using Google Fonts is easy as simple as adding a stylesheet link to your web page and the then using the font in a CSS style.
What is a Stylesheet?
A stylesheet defines the visual appearance and formatting of HTML documents. Your stylesheet interacts with WordPress core files.
WordPress themes use Cascading Style Sheets (CSS) and HTML to output the data generated by WordPress.
CSS is nothing more than a style sheet language used to define visual appearance and formatting of HTML documents.
Where is my Stylesheet?
The stylesheet is a file that is found within your theme’s directory.
To navigate to your stylesheet, you can log in to your domain hosting service and select the file manager through cPanel. Navigate to the root level for your website. Then, go to wp-content > themes > YOUR THEME NAME.
Look for a file named style.css
Protip: If a modification deals with Theme, add it to the theme functions file. If it has to do with WP then create a custom plugin.
How to Use Google Fonts
The Easiest Way to Add Fonts to WordPress Websites
The easiest way to add A Google Font to your WordPress website is to tell your theme’s CSS stylesheet to load the font. This technique uses CSS markup (@import) to “call” for the loading of the font style as soon as the software reads and recognizes the stylesheet.
The @import method is by far the easiest way to start using Google Fonts on WordPress websites.
A Better Way to Add Fonts
A best practice way to add and use Google Fonts in a WordPress website is to use the link and add it via a hook.
Using the Google Font link and hooks technique is a bit more technical but we’ve included a cheat sheet below via the handout link so you can follow our step-by-step procedure.
Conditional Use of Fonts to Use Font Icons
The loading time of fonts is relatively fast in the grand scheme of things. By using conditional logic we can display images that load as a font.
Font Icon Links
Presenter Bio: Benjamin Bradley
Benjamin Bradley trains and assists small business owners to take their skills to the next level. You might recognize Benjamin as "BB" or "The Professor" from the thousands of hours of business and technical training materials he has produced over the last 20 years. In 2017, Benjamin founded WPStudio, his membership community where he provides and an invitation to a very helpful and humorous Slack channel.