wordpress icon fonts | The Blog Pros

May 15, 2024

How to Sell Fonts Online with WordPress (Step by Step)

Are you looking for a way to sell fonts online using WordPress?

Fonts play a crucial role in graphic designing, branding, website building, and other creative tasks. Selling fonts is a great way to make money online, as you can create your own website and target different niches.

In this article, we will show you how to sell fonts online with WordPress.

Why Sell Fonts Online with WordPress?

There is a growing need for fonts, as graphic designers, bloggers, marketers, and business owners of all sizes need a font for their websites. This presents a huge potential opportunity for font designers, as you can easily sell typefaces online to make money.

While it can be a competitive industry, you can find gaps and target a specific niche. For example, you can sell fonts to designers who create logos or target creative artists who create digital art.

Selling online fonts also requires little investment compared to other businesses. To get started, you need only a web hosting platform, a domain name, and an eCommerce platform. For more details, please see how much it costs to build a website.

Plus, you don’t have to worry about storage or restocking with digital products like fonts compared to physical goods.

Now, there are many third-party websites where you can sell your fonts. However, you don’t get complete control over your digital products, and you’d have to share a percentage of your sales with the particular platform.

That’s why it’s better to create your own website to sell digital products, including fonts. You get complete control over your products and the flexibility to sell them however you want. Plus, you don’t have to split the money with anyone.

Which Platforms Should You Use to Sell Fonts Online?

When it comes to selling fonts, you’ll need an eCommerce platform. It will allow you to set up an online shop with a shopping cart, easily upload different fonts, add multiple payment options, and create different pages for your store.

Now, it’s important to select the right platform because moving to another platform in the future can be complicated and take a lot of time and effort.

Some platforms are better suited for physical products, while others are great for selling digital products.

We recommend using WordPress + Easy Digital Downloads.

Is Easy Digital Downloads the right digital eCommerce platform for you?

WordPress is the best website builder in the market, and it powers over 43% of websites on the internet. On the other hand, Easy Digital Downloads is the best eCommerce plugin for WordPress for selling digital products like fonts.

Do note that there are 2 types of WordPress software. First, there is WordPress.com, which is a blog hosting platform. Then there is WordPress.org, which is also known as self-hosted WordPress.

To sell fonts online, you will need the WordPress.org platform because it gives you full control over your site.

For more details, please see our guide on the difference between WordPress.com and WordPress.org.

That said, let’s see how you can easily sell fonts online with WordPress.

Step 1: Setting Up a WordPress Website

To start selling fonts online, you’ll first need a domain name, web hosting, and an SSL certificate.

A domain name is the website address that people will enter on the internet to visit your site. You can think of it as an address to your house but for the internet, like wpbeginner.com.

Web hosting is a place where your website lives online. It’s where all your website files, fonts, and other information are stored. To help you out, we’ve selected the best WordPress hosting services that you can purchase.

One of our top recommended hosting providers is SiteGround. It offers managed WordPress hosting for Easy Digital Downloads (EDD). It comes with a free SSL certificate, EDD pre-installed, all the optimization features, and you get a huge 80% off.

→ Click here to Claim this Exclusive SiteGround offer ←

For more details, you can see our guide on how to make a WordPress website.

Step 2: Setting Up Easy Digital Downloads in WordPress

Next, you’ll need to install Easy Digital Downloads on your WordPress website.

If you opted for SiteGround’s EDD hosting, then Easy Digital Downloads will come preinstalled.

However, if you’re using another WordPress hosting service, then you’ll need to install and activate the Easy Digital Downloads plugin. For more details, please see our guide on how to install a WordPress plugin.

Do note that for this tutorial, we will use the Easy Digital Downloads Pro version because it offers more features, payment gateways, and extensions. However, you can use the Easy Digital Downloads Lite version to get started for free.

Upon activation, you can go to the Downloads » Settings page from your WordPress admin panel. From here, you’ll need to enter the license key under the General tab. You will find the license key in the Easy Digital Downloads account area.

Next, you’ll need to scroll down and enter your business information. For instance, you can choose a business name, business type, address, and more.

You can also select the business country and region from the dropdown menu. This will help determine where your business is located and allow EDD to fill different fields automatically.

Adding a business location to your online digital store

Once you’re done, click the ‘Save Changes’ button.

Step 3: Adding a Payment Method to Sell Fonts

Next, you’ll need to set up payment methods to accept payments from customers who buy fonts.

By default, Easy Digital Downloads include Stripe, PayPal, and credit cards as payment options.

Simply switch to the ‘Payments’ tab and then the ‘General’ tab in the Downloads settings.

Adding payment gateways to your WordPress website

After that, you can check the box next to each payment gateway you want to use on your website.

If you select multiple payment options, then you’ll have to set the default gateway. Simply click the ‘Default Gateway’ dropdown menu and choose the method that will appear default.

Adding a Stripe gateway to your WordPress blog or website

We recommend using Stripe, as it lets you accept credit card payments, Apple Pay, and Google Pay. This makes it a versatile payment option for users.

Next, you’ll need to configure each payment option you selected for selling fonts online. Do note that the process may vary for each service.

For example, we will select Stripe for this tutorial.

Simply click the ‘Stripe’ tab under the Payments settings. From here, click the ‘Connect with Stripe’ button.

Connecting the Stripe payment gateway to WordPress

After that, you can follow the onscreen instructions in the setup wizard to connect your Stripe account with Easy Digital Downloads.

Now, you’ll need to repeat these steps for other payment gateways you added to your digital store.

Lastly, you can switch to the ‘General’ tab and then select ‘Currency.’ Here, Easy Digital Downloads lets you select the default currency for your store.

How to change the currency settings in your online music store

Once you’re done, simply click the ‘Save Changes’ button.

Step 4: Adding Fonts as Digital Products

Now that you’ve set up a WordPress site and configured Easy Digital Downloads, the next step is to add your custom fonts to the store.

To create a digital product, you can head to Downloads from your WordPress dashboard and then click the ‘Add New’ button.

Next, you’ll need to enter the name of your font. This will appear at the top of the product page, so you’d typically want to use the font name.

Under that, you can also add a brief description of the custom font. Here, you can list out the details of your font, like specification, size, style, weights, variations, and more.

After that, you can scroll down to the ‘Download Details’ section.

Here, you’ll see options to set the price for a single product, bundle, or service. Then, under ‘Pricing Options,’ simply enter the price for your custom font.

If you’d like to price different variations of fonts differently, then you can also enable the ‘Enable variable pricing’ option.

Next, you can head to the ‘Download Files’ section. From here, you’ll need to enter a name for your file and then upload the font zip file.

If you have multiple files, then simply click the ‘Add New File’ button and upload different variations of the font.

The final step is adding a product image for your website. You can click the ‘Set Download Image’ option from the settings panel on the right and upload an image.

We recommend using a picture of the font as the download image. This way, a user will know what the font will look like before purchasing.

When you’re happy with all the settings, you can click the ‘Publish’ button at the top.

You can now repeat this step to add more fonts to your WordPress website and sell them online.

Step 5: Customize Your Font Download Emails

Easy Digital Downloads sends default emails to customers who purchase your fonts online.

However, the default email is plain and lacks branding or a logo.

The default Easy Digital Downloads purchase receipt

You can customize these emails in Easy Digital Downloads by adding your own brand name or logo. This helps make your emails stand out and shows a professional touch.

To customize emails, you’ll need to go to Downloads » Settings from the WordPress dashboard and then click on the ‘Emails’ tab.

How to customize the purchase confirmation email on your online store

Here, you can upload a logo by clicking the ‘Attach File’ button.

There are also options to edit the ‘from’ name and email address.

If you scroll down, then Easy Digital Downloads also gives an option to enable WP Mail SMTP.

It is the best SMTP plugin for WordPress that helps email deliverability and prevents your emails from landing in the spam folder or not reaching the customer’s inbox.

To learn more, please see our guide on how to fix the WordPress not sending email issue.

When you are done, simply click the ‘Save Changes’ button.

Next, you can switch to the ‘Purchase Receipts’ tab.

Here, you can edit the purchase email subject, heading, and the text of the email.

Don’t forget to save your changes when you are done.

You can also send a test email to see your changes and ensure everything is working correctly. Simply click the ‘Send Test Email’ button, and EDD will send a message to your admin email address.

Sending a test email from your online music store

Step 6: Promote Your Online Font Store

Now that your digital store is ready to sell fonts, you’ll need to promote it to drive traffic and sales.

There are different ways you can start promoting your store. This can include creating a sales page where you list different fonts and adding the page to your website navigation menu. You can also display different fonts on the homepage to improve their visibility and get conversions.

Other than that, creating a WordPress blog can help drive to your website. You can write about different fonts and cover extensive topics, like when to use them or share your own experience.

Easy Digital Downloads also lets you create a purchase button, which you can add anywhere on your site. It is similar to a buy now button, where users can purchase fonts with a click of a button.

Simply head to Downloads from your WordPress dashboard and edit one of the fonts.

Next, you’ll need to scroll down to the Purchase Shortcode section.

Go ahead and copy the shortcode.

You can now add the purchase shortcode to any page or post and allow users to buy the font.

Bonus: Use Plugins and Tools to Promote Your Digital Downloads Store

Besides that, there are lots of WordPress plugins you can use to help promote your online font store. Here are some of the top picks to help you sell digital products:

OptinMonster – It is the best conversion optimization software in the market. You can create multiple campaigns to grow your email list, convert visitors into customers, and reduce cart abandonment.
All in One SEO (AIOSEO) – It is the best SEO plugin for WordPress that helps optimize your site for search engines and get more traffic and sales.
MonsterInsights – You can use this plugin to set up Google Analytics in WordPress without editing code. It helps track user behavior on your site, shows where visitors are coming from, how your site is performing, and more. You can uncover amazing insights to grow your business and make data-driven decisions.
PushEngage – It is the best push notification software for WordPress. You can use it to send personalized web push notifications and let users know about new fonts, sales, discount coupons, and more.
RafflePress – You can use RafflePress to run viral giveaways. This helps build social followers, grow your email list, build brand recognition, and promote your fonts.

We hope this article helped you learn how to sell fonts online with WordPress. You may also want to see our guide on how to sell videos online with WordPress and the best live chat software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Sell Fonts Online with WordPress (Step by Step) first appeared on WPBeginner.

April 4, 2023

How to Use Icon Fonts in WordPress Post Editor (No Code)

Do you want to use icon fonts in the WordPress post editor?

Icon fonts allow you to easily use images and symbols in text. They are lightweight and won’t slow down your site, and they can be easily scaled to any size and styled like any other text font.

In this article, we’ll show you how to easily use icon fonts in the WordPress post editor without writing any HTML code.

We’ll show you multiple methods, each one using a slightly different approach than the other. You can choose one that works best for you.

Method 1. Adding Icon Fonts in WordPress Post Editor using JVM Rich Text Icons

This method is recommended to use on any kind of WordPress website. It is easy to use and works seamlessly with the block editor.

First, you need to install and activate the JVM Rich Text Icons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can simply edit a WordPress post or page or create a new one. Inside the post editor, add a new paragraph block, and you’ll see a new Flag icon in the block toolbar.

Clicking on it will show a popup of icons to choose from. It uses the popular Font Awesome icon fonts by default.

You can use the search to look for an icon or simply scroll down to find the icon you want, and then click to add it.

One advantage of using icon fonts is that you can use CSS to style them.

However, since you are already using the block editor, you can simply use the built-in color tools to style the icons.

The plugin allows you to use icon fonts in most text blocks such as Paragraph, List, Button, Columns, Cover, and more.

Here is an example of using icon fonts and block options to style three columns.

Another useful example of using icon fonts is with buttons.

This time we are using inline icon fonts alongside some text for the two buttons.

Feel free to use the block editor tools like text alignment, colors, spacing, and more to get the most out of the icon fonts.

Method 2. Add Icon Fonts in WordPress Post Editor with Font Awesome

This method requires you to add shortcodes in the post editor to display icon fonts. You can use this method if you don’t need to regularly use icon fonts in your WordPress posts and pages.

First, you need to install and activate the Font Awesome plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can edit a post or page in WordPress and use the following shortcode to add a font icon.

[icon name="home"]

The name parameter here is the name of the font used by Font Awesome. You can find the entire list on the Font Awesome cheatsheet page.

Once added, you can preview your post or page to see how the icon will look on the live site since it will not display as an icon in the block editor.

This is how it looked on our test site.

You can use the shortcode inside a paragraph and inline with other text. You can also add it on its own using the ‘Shortcode’ block.

However, using the ‘Shortcode’ block will not give you the styling options you’ll get with other text blocks.

You can also add the shortcode inside columns to create a features row.

It would be a bit trickier as you will not be able to see the actual images, and the column heights will keep changing within the editor.

Here is how it looked on our test website. The columns are the same height, even though they are not in the editor.

You’ll probably have to preview your work in a new browser tab many times to see how it will look to users.

Method 3. Using Icon Fonts with WordPress Page Builders

This method is great if you are creating a landing page or designing your website using a WordPress page builder like SeedProd.

SeedProd is the best WordPress page builder on the market. It allows you to easily create beautiful landing pages or design your complete website.

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll be asked to enter your plugin license key. You can find this information under your account on the SeedProd website.

After entering your license key and clicking ‘Verify Key,’ you can start working on your landing page.

Simply go to the SeedProd » Landing Pages page and click on the ‘Add New Landing Page’ button.

After that, you will be asked to choose a template for your landing page.

SeedProd comes with a bunch of beautiful designs that you can use as a starting point, or you can start with a blank template and design the whole thing yourself.

For this tutorial, we will be using a pre-designed template. Simply click on a template to select it and continue.

Next, you will be asked to provide a title for your landing page and choose a URL.

After entering them, click on the ‘Save and Start Editing the Page’ button to continue.

SeedProd will now launch the page builder interface. It is a drag-and-drop design tool where you can simply point and click on any item to edit it.

You can also drag and drop blocks from the left column to add new elements to your design.

For the sake of this tutorial, we are going to add the Icon block.

After you add the block, you can simply click to edit its properties.

The left column will change to show the options for the Icon block. You can click into the ‘Icon’ section to the left and choose a different icon image or change the color and style.

Another way to use icons in SeedProd is by adding the ‘Icon Box’ block.

The difference between this and the ‘Icon’ block we used previously is that ‘Icon Box’ allows you to add text along with your chosen icon.

This is one of the most common ways to use icons when displaying product features, services, and other items.

You can place your icon box inside columns, choose colors, and adjust the icon size to your liking.

Additionally, you can also format the accompanying text using SeedProd’s formatting toolbar.

Once you are finished editing your page, don’t forget to click on the ‘Save’ button at the top right corner of the screen.

If you’re ready, you can click ‘Publish’ for the page to go live, or you can click on ‘Preview’ to make sure it looks like you want it to.

You can also click on ‘Save as Template’ so you can reuse this design with SeedProd on other parts of your website.

Here is how the icon fonts looked on our test website.

We hope this article helped you learn how to use icon fonts in WordPress post editor without writing HTML code. You may also want to see our WordPress performance guide to optimize your website speed or the best landing page plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use Icon Fonts in WordPress Post Editor (No Code) first appeared on WPBeginner.

September 25, 2019February 22, 2023

How to Easily Add Icon Fonts in Your WordPress Theme

Do you want to add icon fonts to your WordPress site?

Icon fonts allow you to add resizable vector icons that are loaded like web fonts, so they don’t slow down your website. You can even style them using CSS to get exactly the look you want.

In this article, we will show you how to easily add icon fonts in your WordPress theme.

What are Icon Fonts and Why You Should Use Them?

Icon fonts contain symbols or small pictures instead of letters and numbers.

You can use these icon fonts to show common images. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contests, and even in WordPress navigation menus.

Most visitors will immediately understand what a commonly-used icon means. In this way, you can help visitors find their way around your website and engage with your content.

These pictures can also help you create a multilingual WordPress website, since most people can understand icon fonts no matter what language they speak.

Compared to image-based icons, font icons load much more quickly so they can boost WordPress speed and performance.

There are several open-source icon font sets that you can use for free such as IcoMoon, Genericons, and Linearicons.

In fact, the WordPress software comes with free dashicon icons built-in. These are the icons you can see in the WordPress admin area.

In this guide, we’ll be using Font Awesome as it is the most popular open-source icon set. We use it on WPBeginner, and in all our premium WordPress plugins.

With that said, let’s look at how you can easily add icon fonts in your WordPress theme. Simply use the quick links to jump straight to the method that you want to use.

Method 1. Adding Icon Fonts Using a WordPress Plugin (Easy)
Method 2. Using Icon Fonts with SeedProd (More Customizable)

Method 1. Adding Icon Fonts Using a WordPress Plugin (Easy)

The easiest way to add icon fonts to WordPress is by using the Font Awesome plugin. This allows you to use icon fonts in your pages and posts without modifying your theme files. You’ll also get any new Font Awesome icons automatically every time you update the plugin.

The first thing you need to do is install and activate the Font Awesome plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can add a Font Awesome icon to any shortcode block. Simply open the page or post where you want to show the icon font, and then click on the ‘+’ icon.

You can now search for ‘Shortcode’ and select the right block when it appears.

Adding a font icon to WordPress using shortcode

With that done, you can add any Font Awesome icon using the following shortcode:

[icon name="rocket"]

Simply replace “rocket” with the name of the icon that you want to show. To get this name, head over to the Font Awesome site and click on the icon that you want to use.

Choosing an icon font for your WordPress website

In the popup that appears, go ahead and click on the icon’s name.

Font Awesome will now copy the name to your clipboard automatically.

With that done, simply paste the name into the shortcode. You can now click on ‘Publish’ or ‘Update’ to make the icon font live.

Sometimes you may want to show an icon font inside a block of text. For example, you may need to display a ‘copyright’ symbol after a brand name.

To do this, simply paste the shortcode inside any Paragraph block.

You can then use the settings in the right-hand menu to customize the icon, similar to how you customize options for text blocks. For example, you can change the font size.

WordPress will turn the shortcode into a Font Awesome icon for visitors and show it alongside your text.

Another option is to add the shortcode to any widget-ready area.

For example, you can add a Shortcode block to your site’s sidebar or similar section.

For more information, please see our guide on how to use shortcodes in your WordPress sidebar widgets.

You can even add the icon shortcode to columns and create beautiful feature boxes.

An example of a features box on a WordPress website

For detailed instructions, see our guide on how to add feature boxes with icons in WordPress.

Many websites use icon fonts in their menus, to help visitors find their way around. To add an icon, either create a new menu or open an existing menu in the WordPress dashboard.

For step-by-step instructions, check out our beginner’s guide on how to add a navigation menu in WordPress.

Then, click on ‘Screen Options’ and check the box next to ‘CSS Classes.’

Adding CSS classes to a WordPress navigation menu

With that done, simply click to expand the menu item where you want to show the icon.

You should now see a new ‘CSS Classes’ field.

To get an icon’s CSS class, simply find the icon font on the Font Awesome website and give it a click. If you want, then you can change the icon’s style by clicking on the different settings.

In the popup, you’ll see an HTML code snippet. The CSS class is simply the text between the quotation marks. For example, in the following image, the CSS class is fa-solid fa-address-book.

Simply copy the text inside the quotes, then switch back to the WordPress dashboard.

You can now paste the text into the ‘CSS Classes’ field.

To add more icon fonts, simply follow the same process described above.

When you’re happy with how the menu is set up, click on ‘Save.’ Now if you visit your WordPress website you’ll see the updated navigation menu.

An example of icon fonts in a WordPress navigation menu

Method 2. Using Icon Fonts with SeedProd (More Customizable)

If you want more freedom over where you use font icons, then we recommend using a page builder plugin.

SeedProd is the best drag-and-drop WordPress page builder in the market and has over 1400 Font Awesome icons built-in. It also has a ready-made Icon box that you can add to any page using drag and drop.

With SeedProd, it’s easy to create custom pages in WordPress and then show Font Awesome icons anywhere on those pages.

The first thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but we’ll be using the Pro version since it comes with the Icon box.

Upon activation, go to SeedProd » Settings and enter your license key.

You can find this information under your account on the SeedProd website. After entering the license key, go ahead and click the ‘Verify Key’ button.

Next, you need to visit SeedProd » Pages and click on the ‘Add New Landing Page’ button.

Choosing a custom design for your WordPress page

Now, you can choose a template to use as the basis for your page. SeedProd has over 180 professionally-designed templates that you can customize according to your WordPress blog or website’s needs.

To select a template, hover your mouse over it and then click the ‘Checkmark’ icon.

Choosing a professionally-designed template

We’re using the ‘Ebook Sales Page’ template in all our images, but you can use any design you want.

Next, go ahead and type in a name for the custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Adding a title to a SeedProd page design

Next, you’ll be taken to the SeedProd drag-and-drop page builder, where you can customize the template.

The SeedProd editor shows a live preview of your design to the right and some block settings on the left.

Customizing a SeedProd WordPress page template

The left-hand menu also has blocks that you can drag onto your design.

You can drag and drop standard blocks like buttons and images or use advanced blocks such as the contact form, countdown, social share buttons, and more.

Adding blocks a page or post design in WordPress

To customize any block, simply click to select it in your layout.

The left-hand menu will now show all the settings you can use to customize that block. For example, you can often change background colors, add background images, or change the color scheme and fonts to better match your brand.

Creating a custom layout for a WordPress website

To add an icon font to the page, simply find the ‘Icon’ block in the left-hand column and then drag it onto your layout.

SeedProd will show an ‘arrow’ icon by default.

To show a different Font Awesome icon instead, simply click to select the Icon block.

In the left-hand menu, hover your mouse over the icon and then click on the ‘Icon Library’ button when it appears.

You’ll now see all the different Font Awesome icons that you can choose from.

Simply find the font icon that you want to use and give it a click.

SeedProd will now add the icon to your layout.

After choosing an icon, you can change its alignment, color, and size using the settings in the left-hand menu.

You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.

When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.

Publishing a custom page layout with a font icon

We hope this article helped you learn how to add icon fonts in your WordPress theme. You can also go through our guide on the best popup plugins compared and how to choose the best web design software.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Add Icon Fonts in Your WordPress Theme first appeared on WPBeginner.