Wordpress – Help Desk Geek https://helpdeskgeek.com Tech Tips from Trusted Tech Experts Mon, 14 Jun 2021 19:25:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.3 The Best Blog Writing Format to Get Your Points Across https://helpdeskgeek.com/wordpress/the-best-blog-writing-format-to-get-your-points-across/ https://helpdeskgeek.com/wordpress/the-best-blog-writing-format-to-get-your-points-across/#disqus_thread Ryan Dube]]> Mon, 14 Jun 2021 22:00:00 +0000 https://helpdeskgeek.com/?p=51042

If you own a blog or write for one, it’s easy to get carried away with what you’re writing about and forget that an actual person needs to read and […]]]>
If you own a blog or write for one, it’s easy to get carried away with what you’re writing about and forget that an actual person needs to read and understand what you’re writing.

Writing essays for school or crafting a fiction novel is very different from writing content for a web audience.

In this article we’ll provide you with 6 key blog writing format tips that’ll ensure your readers don’t hit the “back” button before getting to the last line of your article

6 Key Blog Writing Format Tips

As we go through this list, we’ll highlight actual articles from this site where these tips were used successfully. The following are the key things to keep in mind as you craft your blog posts.

  1. Start simple: Give your readers the simple answer first, then expand on it later.
  2. Readability: Bullet lists, small paragraphs, and plenty of headers.
  3. Logical headers: Your headers should have a natural thought process from first to last.
  4. Lots of graphics: Pictures really are worth a thousand words, so use them everywhere!
  5. Use keywords: No, not keyword spamming. Actually mentioning what your writing about is actually something too many authors forget to do!
  6. Be engaging: Write like you’re explaining something to your best friend.

You may notice some of these things already being used in this article. That’s the point. Now for those of you who want more than just a simple list, let’s move on to each tip in more detail.

1. Start Your Article with Simple Explanations

When people search Google for something, they want quick answers. This is actually why Google launched “featured snippets”, which are essentially special boxes at the top of a search that answers the user’s question quickly.

These are answers pulled directly out of the section of your article with that simple answer. For example, Elsie’s article on how to reopen a closed browser tab uses a perfect blog writing format that starts off with a list of methods you can use to accomplish this.

This isn’t just good for Google, it’s also good for your readers. Placing the easiest information at the top of your article lets readers who don’t need all the details get the answer they want without much scrolling.

That makes a happy reader who’s more likely to bookmark your site and visit again later. It also helps other readers who do want more details recognize whether your article contains the detailed information they need. If you’ve listed what they’re looking for, they’ll keep scrolling.

2. Make Your Formatting Ridiculously Readable

There are three core elements that make a blog’s writing format readable:

  • Lists (numbered or bulleted)
  • Pictures (relevant pictures or screenshots showing steps)
  • Headers (organizing the thought process)
  • Small bite-sized paragraphs

The idea is that you’re not forcing the reader’s mind to stay focused on a massive wall of text that takes 5 minutes to read. The human mind likes change, and small pieces of information at a time.

For example, one of our authors who is excellent at this is Elsie. For example, in her article on the best caller ID apps, she organizes major headers by platforms, followed by a numbered header for each list item.

Each list section includes a bulleted list of features for the app, small paragraphs that are quick to skim, and of course nice, big screenshots.

The point here is that you can quickly skim through an article that’s laid out in this way and your brain can still take in all of the important points.

The header provides the context, subheaders refine the context, pictures provide clear examples, and lists provide quickly digestible details.

Readability is a beautiful thing when it’s done right.

3. Order Headers So They Make Sense

When you first start writing your article, it’s a good idea to format the blog post by outlining it with headers first. Work through the logic of what you want to write from start to finish and order the headers accordingly.

For example, a listicle like the article you’re reading has numbered headers for items in the list. And if you’ve created an opening section with that “simple” list, readers will know exactly where to scroll down to in order to get the information they want.

For a how-to article, obviously you’d have each header as a numbered step. Or, like Patrick’s article on how to change Minecraft skins, you may have a section for each platform and subheaders for each method on that platform.

The point here is to use headers as the thought process of your article. Don’t jump around from one subject to the next in a disordered way or you’ll lose readers along the way. 

Even worse, you may give a few a headache because they can’t follow your disorganized train of thought.

4. Don’t Skimp on Visuals

You’d be surprised just how often it’s possible to use a picture or a diagram to explain something in far less space than you’d use with words.

For how-to articles, this is simple. Screenshots are key. For “explainer” articles covering more complicated topics, sometimes you need to take the time required to actually draw out a diagram for your readers.

A perfect example of this is Sydney’s article on what ray tracing is. Below a section where he describes the concept of rasterization, Sydney then provides a diagram showing how a computer figures out what a 3D world should look like if your monitor screen was a window.

Try explaining something that complex without a diagram, and you’d probably end up writing an entire page. And you’d lose your readers along the way.

Use visuals like this anywhere and everywhere that you possibly can.

5. Keywords? Do People Still Use Those?

Here’s a simple concept. How do you think people actually find your articles when you publish them to the web?

Google still maintains roughly 95% of the search engine market. And while Google’s search algorithm has gotten more complicated and difficult to understand over the years, one concept remains unchanged since day one: say what you’re writing about.

If you look through this article, I’ve said “blog writing format” in a variety of ways, not to stuff the article with the same phrase a dozen times, but because I’m actually writing about that topic. So saying what I’m writing about is common sense.

Search Google for some random topic like “how to build a raft”. The first result is an article from a survival skills magazine.

You’ll notice that the author actually used the phrase “build a raft” in a primary header, and mentioned it again in the first paragraph. Google highlights the words that match your search.

In fact, Google highlighted that section of the article as a featured snippet.

The author mentioned the topic with a variety of alternative phrases, like “make a raft”, “building a raft”, etc… 

Go to the sites listed on page 5 of Google results, and you’ll see a dramatic difference.

This is, in fact, an article on how to build a raft. It’s also a survival website. The author refers to the concept of building a raft once. 

It’s an entire article about building a raft, without any headers, no numbered steps, and the topic mentioned only once.

Use common sense. If you’re going to write about something, it’s smart to mention the topic at least a few times, don’t you think?

6. Explain It to Me Like I’m Your Best Friend

If you want the reader to stay with you, you need to make them trust you. You can do that by being friendly and informal. 

A great example of this is Maggie’s article on getting started with a Raspberry PI 4. It’s a topic that most people would assume would be as dry as a rock in the desert. But Maggie tosses in a few witty comments to keep readers engaged.

Now advising people to be patient while waiting for an install is friendly enough. But then Maggie sends readers to a fitness article so they can exercise while they’re waiting. Classic!

Use All Elements Together

It really doesn’t take rocket-science to pepper all of these elements into your blog posts. The key is to always remember that the writing format you use in your blog posts all play a small part in keeping the reader interested, entertained, and engaged with you.

If you do it all right, they’ll actually make it to the last line of the article. And they may even be smiling about it.

Did you make it? I hope you did. And if you’re here, why not hang around a little longer and post a comment with other ideas you’ve used to make your blog posts more interesting for readers?

]]>
https://helpdeskgeek.com/wordpress/the-best-blog-writing-format-to-get-your-points-across/feed/ 0
How to Duplicate a Page in WordPress https://helpdeskgeek.com/wordpress/how-to-duplicate-a-page-in-wordpress/ https://helpdeskgeek.com/wordpress/how-to-duplicate-a-page-in-wordpress/#disqus_thread Elsie Otachi]]> Thu, 07 Jan 2021 11:00:35 +0000 https://helpdeskgeek.com/?p=46836

Duplicating a page in WordPress can be useful when you want to make copies of a template you’ve made for future pages. You may also want to base a new […]]]>
Duplicating a page in WordPress can be useful when you want to make copies of a template you’ve made for future pages. You may also want to base a new page after an existing page to experiment with it without altering the original.

You can copy and paste content from an old page to a new one, but that would be a time-consuming and laborious way to duplicate a page in WordPress. Plus, you may change the original content by mistake, and it might not be possible to copy over important settings, layouts, SEO data or images from the old page. Alternatively, you can use a plugin to duplicate the page.

This guide will show you all the options you have available to duplicate a page in WordPress so you can work on it without affecting the existing version.

How to Duplicate a Page in WordPress

There are built-in and manual ways to duplicate a page in WordPress, but we’ll also mention some of the best plugins for the task.

Built-in or Manual Methods

If you have only one post to copy, you can duplicate the post by copying and pasting your content to the new page.

  1. To get started, open the existing page that you want to duplicate. Select More Tools & Options.
  1. Select the Code Editor.
  1. Copy the code for the page you want to duplicate, and then select Add New from your dashboard to create a new page.
  1. Open the Code Editor in the new page and paste the code you copied earlier. 
  2. Select More Tools & Options menu and then select the Visual Editor. Your new page should now be a duplicate of the existing page.

Note: This method is easier to use if you don’t want to edit your site’s functions.php file. However, it can take a little time if you have multiple pages to duplicate as you’ll need to do it individually for each page.

How to Use a Plugin to Duplicate a Page in WordPress

You’ve probably installed plugins on your WordPress site before, and you may think adding one more may slow down your site. However, if you want to duplicate pages in bulk, a plugin is the easiest, quickest, and most reliable way to get the job done. They’re also useful if you need to do this often.

Here are some plugins that will make duplicating pages in WordPress a breeze.

1. Duplicate Post

Duplicate Post is a popular WordPress plugin for duplicating pages on your website. Once you install and activate the plugin, go to Pages > All and select the Clone link under the page to duplicate it.

A new page will be created for you with the same settings and content. The plugin also offers prefix or suffix options to help you differentiate the original page from the clone.

You can also select Bulk Actions to clone multiple pages all at once.

2. Duplicate Page

Duplicate Page is another popular plugin that offers a few extra features you won’t find with similar cloning plugins. To duplicate pages in WordPress, install and activate the plugin, go to the Pages admin screen and select the Duplicate This link under the pages you want to duplicate.

You’ll get a new page with the same settings or content as the original page, and you can edit or amend the page to your liking. You can save the resulting copies as public, private, pending or draft.

3. Duplicate Page and Post

Unlike other cloning plugins, Duplicate Page and Post doesn’t offer many features, which makes it a lightweight and fast plugin for duplicating pages on your WordPress website. To use this plugin, install and activate it, and then select the Duplicate option under the page you want to clone.

4. Post Duplicator

Post Duplicator is a simple plugin that creates an exact clone of any page on your WordPress website including custom taxonomies and fields. The plugin is easy to use, lightweight and quick, so it won’t bog down your site.

To duplicate a page in WordPress using Post Duplicator, install and activate the plugin, and then go to Pages > All. From here, select Duplicate Page to clone the page you want along with its settings and content.

Create Exact Copies for Future Pages

WordPress may be the leading CMS but it still lacks some potentially useful functionality out of the box, including how to duplicate a page. 

Both options we’ve covered will get the job done, with plugins being the fastest, most reliable, and hands-off solution. Whichever method you use, you’ll avoid the tedious copy-pasting process and have more time available to grow your site.

Tell us if you were able to duplicate a page in WordPress by leaving a comment below.

]]>
https://helpdeskgeek.com/wordpress/how-to-duplicate-a-page-in-wordpress/feed/ 0
WordPress Gutenberg Tutorial: How to Use the New Editor https://helpdeskgeek.com/wordpress/wordpress-gutenberg-tutorial-how-to-use-the-new-editor/ https://helpdeskgeek.com/wordpress/wordpress-gutenberg-tutorial-how-to-use-the-new-editor/#disqus_thread Elsie Otachi]]> Fri, 01 Jan 2021 23:00:50 +0000 https://helpdeskgeek.com/?p=46715

If you’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordPress 5.0 back in 2018. This […]]]>
If you’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

  • Paragraph
  • Header
  • Image
  • List
  • Quote
  • Code
  • Preformatted
  • Pullquote
  • Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

  • Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
  • If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
  • Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
  • Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

  • Tables
  • Files and media
  • Videos
  • The “More” tag
  • Page breaks and separators
  • Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
  • Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

  • The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
  • Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
  • The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
  • The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

]]>
https://helpdeskgeek.com/wordpress/wordpress-gutenberg-tutorial-how-to-use-the-new-editor/feed/ 0
How to Build a Wix Blog That’s Just As Good as WordPress https://helpdeskgeek.com/wordpress/how-to-build-a-wix-blog-thats-just-as-good-as-wordpress/ https://helpdeskgeek.com/wordpress/how-to-build-a-wix-blog-thats-just-as-good-as-wordpress/#disqus_thread Sydney Butler]]> Sat, 19 Dec 2020 11:00:00 +0000 https://helpdeskgeek.com/?p=46382

Wix is a platform for building all manner of sites. It’s a service designed to let you create your site without needing advanced technical knowledge or design sensibility. Anyone can […]]]>
Wix is a platform for building all manner of sites. It’s a service designed to let you create your site without needing advanced technical knowledge or design sensibility. Anyone can create a professional and modern-looking website on the platform. The free version of the service offers more than most private individuals need.

Though most people probably think of Wix as a place to make personal brand sites or set up small online shops, it has a robust blogging tool as well. If you want to make a beautiful Wix blog to rival the best WordPress can offer, you’re in the right place.

The Trouble With WordPress

While WordPress is an excellent, mature blogging platform, it’s not the most user-friendly experience. WordPress itself is a free and open source software package. However, you need to provide your own hosting solution.

That means renting or buying a server and installing and configuring your own instance of WordPress. You can pay to have WordPress hosted and managed by someone else which is comparable to using Wix.

Already Have a Wix Site?

If you wish to add your Wix blog to an existing site, then select the blog app from the Wix App Market. From there, it’s pretty much the same process as editing a blog template as described below. The rest of this guide is based on the assumption that you’re creating a Wix Blog site by itself.

Getting Started With Your Wix Blog

If you haven’t yet, go to Wix.com and create an account. Once you’re logged in, select Create New Site.

When presented with the option of which type of website you want to create, select Blog. 

You now have two options on how you want to create your site. 

The first uses a system known as Wix ADI (artificial design intelligence). Here you’ll be asked a series of questions and the Wix AI will create a site automatically for you.

The ADI is a guided process, so there’s no need for us to walk you through it. We’ll focus on the second option. We’ll be using the Wix editor to modify a template to reflect exactly what we want.

Choosing a Template for Your Wix Blog

Wix has a sizable selection of blog site templates. It can feel overwhelming to choose the right one for you. By default, you’ll be shown templates from every category. It may be easier to pick one by choosing one of these sub-categories first.

Just remember that nothing stops you from choosing any template regardless of its type. These have just been designed for specific types of blogs, but nothing precludes you from using them for a blog outside of its intended category.

If you see a template that looks interesting, select View and you can see a demo of it. Which should help you make a final decision about which template you want.

Once you’ve settled on a template, select Edit to get started on your Wix blog’s design. 

Wix has a much easier template process than WordPress. Using WordPress templates is a multi-step process that can get quite technical if you’re administering your own site. Wix is a click-and-forget solution.

Editing Your Blog Template

At first glance the editor can be quite overwhelming, but if you just take a minute to look around you’ll soon realize it’s pretty intuitive.There’s way too much functionality in the editor for us to cover everything here, so we’re just going to go over the basics.

The most important control you should know about first is the page switcher menu.

Select this dropdown to change to one of the various page types that make up your blog. This means you can tweak the look of each page that your site is constructed from. 

Next to it is another very important control. This is the switch to view the desktop and mobile version of the site. Since a huge percentage of your readers will be using a smartphone, you shouldn’t neglect checking that the site still looks and works well on mobile devices.

Since we’re working with a pre-existing template here, the best approach is to simply edit the elements that have already been provided for you in the template. We’re not going to cover making fundamental elements of the template design in this article. However, when you’re more comfortable with editing in Wix you can advance to starting from scratch or radically altering templates to your taste.

Wix includes tips into the placeholder text to let you know what content should go in each place and how to do it according to best practices.

What you see is what you get. You can select just about any element in the template with your mouse pointer and change it. Move it, stretch it or change the text. Most of the things that you’d expect to do intuitively will work as expected. Some elements, such as the name of other pages in menu bars, can’t be changed.

In WordPress, theme development requires quite a bit of coding knowledge. While Wix doesn’t give you the same level of control, you can radically alter your template using nothing but drag and drop tools, which is a huge advantage.

Key Left Side Toolbars

On the left-hand side of the Wix editor you’ll see a vertical stack of buttons. For the purposes of editing your blog before publishing it, some of these are more important than others.

At the top you’ll find the Pages button. 

This replicates most of the functions of the page switcher at the top of the tool and lets you move between pages in a different way. Page transitions may also be found here.

Below this, you’ll find Page Background. 

Pick an image or video to serve as the background to your blog from the catalogue. Alternatively, upload your own custom art. Just be careful to preserve the readability of your text!

Next we have a button with a big plus sign on it. 

This lets you add just about any element you can think of to your Wix blog, such as buttons or menus.

The Media button lets you add media from your computer or social media. 

We found the Google Drive and DropBox integration particularly useful here.

The final button we’ll mention is perhaps the most important one for this particular context. 

The Blog Manager button lets you add new posts and edit existing ones. It also allows quick access to help resources aimed specifically at blogging.

Key Floating Toolbar Highlights

To the right of the editor window, you’ll see a floating toolbar. This gives you important information about each element. As you select them you’ll see size and position information change. This is also where you can specify rotation angles and other precise values.

Write Posts and Give Your Wix Blog a Name

After you’ve edited the look of your Wix blog to your satisfaction, you’ll need to create actual content for it before you can publish it. 

You can use the My Blog button we mentioned above to create your first posts, but there are already a number of posts that have been created as placeholders for the template. Either delete them or edit them into unique posts of your own. Their titles are a good place to get inspiration for article types.

Finally, don’t forget to actually name your blog. This is one of the most important things you’ll do. So don’t take it lightly. That name will be what people see first in searches and sums up the character and nature of your publication.

Hit the Publish Button

Now you should be ready to publish your blog. From here it’s all up to your ability to craft content people will love and share. You can buy and link your Wix blog to a custom domain or have Wix handle it for you for a fee. Either way, unlike WordPress, you don’t have to worry about also running a server and being a system administrator on top of managing a blog.

]]>
https://helpdeskgeek.com/wordpress/how-to-build-a-wix-blog-thats-just-as-good-as-wordpress/feed/ 0
How to Change Fonts in WordPress https://helpdeskgeek.com/wordpress/how-to-change-fonts-in-wordpress/ https://helpdeskgeek.com/wordpress/how-to-change-fonts-in-wordpress/#disqus_thread Elsie Otachi]]> Fri, 13 Nov 2020 23:00:55 +0000 https://helpdeskgeek.com/?p=45584

A great way to add some branding and individualism to your WordPress site is to change the fonts in your theme. Typography and other banding elements create a good first […]]]>
A great way to add some branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

  1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.
  1. Type Google Fonts Typography in the search box, and select Install Now.
  1. Select Activate.
  1. Next, access the Customizer by going to Appearance > Customize.
  1. Select the Google Fonts section.
  1. Next, click on the link to open the fonts’ settings and configure them as follows:
  • Under Basic Settings, set the default font for your body text, headings, and buttons.
  • Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

  1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

  1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.
  1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

  1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

  1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

  1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

  1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

  1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

  1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.
  1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
  2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

  1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

]]>
https://helpdeskgeek.com/wordpress/how-to-change-fonts-in-wordpress/feed/ 0