Amazing Ways To Use Fonts and Font Icons

Presented by Benjamin Bradley on 07/02/2018 2:00pm

WordPressFor 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.

Links:Affiliate Link Disclosure Statement

Font Links

Making the web more beautiful, fast, and open through great typography
Welcome to MyFonts, the #1 place to download great @font-face webfonts and desktop fonts: classics (Baskerville, Futura, Garamond) alongside hot new fonts (Walbaum, Mackay, Recoleta).

Font Icon Links

IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.
Font SquirrelCreate Your Own @font-face Kits by uploading the fonts you want to use.

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 access to his custom WordPress theme (and child themes), unique and useful WordPress plugins, hours of webinar replays, an ongoing of scheduled of webinars, and an invitation to a very helpful and humorous Slack channel.

×

Connect. Network. Thrive! - 24 / 7 / 365 It's Free!

s2Member®