Category: torquemag.io

Studying examples of hyperlink design is more significant than you would think. Links are what turn the Internet into “the web” and connect otherwise unrelated pages and websites to each other. They also lead visitors around your site, allow them to discover more of it, and dive deeper into the topics they are interested in. Plus, as backlinks, hyperlinks are desired as an SEO signal.

In short, without links, websites and the Internet wouldn’t be what they are.

We have already talked about how to style links using CSS in a past article. However, just because you know how to apply it, that doesn’t mean you know what styling to give your links. For that reason, that’s what we want to cover in this post.

Below, we will go over examples of how different websites make sure their links are noticeable and good-looking. We will also examine the underlying markup and discuss how they achieved the design for their hyperlinks. Hopefully, together it will give you a good understanding and ideas for the links on your own website.

Why Think About Your Link Design at All?

Let’s first talk about why you should invest in the design of your site’s hyperlinks to begin with. Unless you are in the web design business, you are probably so familiar with using them, that you never really consciously thought the way they look before.

Yet, if you pay attention, you quickly notice that links appear very different from website to website. They use various colors, some are underlined, some not, yet, you still instinctively know that a piece of text is a clickable link. At least, in the best case scenario.

In the worst case, the link design is so bad that you are having a hard time identifying them and that is a problem.

Why?

Because, first of all, few people actually read your entire pages and articles, most of them scan. That means they jump from one anchor point to another to find only the parts of your content that interest and are relevant to them.

Along with headings or images, links are one of those anchors. If you don’t make them stand out and identifiable, it makes your content harder to understand for a large part of your readership. And that’s never a good idea if you want them to stick around.

Of course, you also need to think about link anchor text, which lets them know where the link will take them but that’s a topic for a whole other article.

Aside from that, your links are part of your web design, so you need to make sure they are consistent with the rest of your site.

How to Target Links

As already mentioned in the introduction, we have an entire article on how to style links via CSS that I highly recommended you check out. However, because some of the principles in it are important to understand the examples below, here are the cliff notes.

The first thing that is important to know is that, in HTML, links are created with the a or anchor tag.

<a href="https://torquemag.io/">TorqueMag</a>

As consequence, that’s also how to target their styling in CSS:

a {
	color: #3af278;
}

Secondly, besides simply a, links go through several states when used.

You can style them separately using pseudo classes:

• a:visited – A link that the user has visited before, meaning it exists in their browser’s history.
• a:focus – A focused link, for example, is one that a visitor has navigated to using the tab key.
• a:hover – The styling that is visible when users hover their mouse cursor over a link. hover and focus are often styled together.
• a:active – Briefly visible styling during the moment of a link click.

Hyperlink Design Examples to Inspire Your Own Choices

After this quick discourse, let’s have a look at the different ways you can design hyperlinks on your website.

Smashing Magazine

We are starting off with Smashing Magazine. As a well-known web design magazine, you would think their link-design game is on point. For that reason, it’s suprising to see that they pretty much went with the standard option, at least for their in-content links. They are blue, underlined, and they don’t even change when hovered over.

On the one hand, this is really good as it makes sure anyone can recognize them as links. On the other, it’s a bit disappointing because the rest of the website has a lot of microinteractions, but the links don’t.

But fear not, when set to focus, a little playfulness and branding does come through with a dotted line around the link in Smashing Magazine red.

How They Did It

If you want to use a similar outline effect as Smashing Magazine, here’s the CSS markup:

:focus {
      outline: 3px dotted var(--THEME_COLOR_HOVER,#d33a2c) !important;
      outline-offset: 2px;
}

It’s nothing too crazy. A simple dotted outline with a defined width, color (using CSS custom properties), and an offset to make it wider.

TorqueMag

Next up is how we handle link design here on TorqueMag. If you examine any of the links on this or other pages, you will find out the following:

• Hyperlinks are blue and underlined in a colorful way
• Hovering turns them black and also changes the color of the underscore
• When focused or active, a link gets surrounded by a box with a drop shadow

CSS Markup

How is all of this technically achieved? Let’s start with the obvious star of the show, the gradient used for underlining the links, both in their normal state and at hover and active. Below is the code that creates it.

a {
    color: #5568aa;
    text-decoration: none;
    font-weight: 700;
    background-image: linear-gradient(45deg,#ffc08c,#aa278c 30%,#0ecad4);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 100% 2px;
    transition: background-size .3s;
}

a:focus,
a:hover {
    color: #252d4a;
    background-size: 400% 2px;
    -webkit-animation: underline-gradient 4s linear infinite;
    animation: underline-gradient 4s linear infinite;
    text-decoration: none;
}

Here’s the breakdown: First of all, the CSS markup eliminates the usual underline (see text-decoration: none;) and then creates a background image with a gradient that uses three colors. This background image is then positioned fully at the bottom and set to repeat. Finally, it receives a size, which is 100% horizontally and 2px vertically.

There is also a transition property that’s needed for the hover effect, which, suprsingly, is achieved by increasing the size of the background image. That way, the colors stretch out, which, together with transition, give it a sense of motion. The latter is amplified by the fact that the hover effect also uses an animation that causes the colors to keep moving while the cursor is on the link.

Lots of stuff going on for a simple link, isn’t there?

In contrast to that, the focus design is quite simple with just an outline and a drop shadow to the outside:

:focus {
    box-shadow: 0 0 6px #75a1f2;
    outline: 1px solid #75a1f2;
}

WPKube

I have to admit, I really like this next hyperlink design example. While it’s quite simple, in my opinion, it’s also very tastefully done.

The initial design looks simple enough: links are colored in red with a grey line underneath.

When you hover over it, the grey line takes on the same shade of red, with just the slightest delay between the two states.

The Underlying Code

Naturally, the markup for this kind of look is not very complicated:

a {
    border-bottom: 1px solid #ddd;
}


a:hover {
    border-bottom: 1px solid #f05928;
    text-decoration: none;
}

The interesting thing is that they achieve it with the border property. This used to be a thing because it gave you more control over how to style the line. However, today have new CSS features that can target text-decoration properties directly, like text-decoration-offset or text-decoration-thickness, so hacking it via border is no longer necessary.

Notice that the transition effect is part of a catch-all declaration for many site elements, including buttons, etc. It is small but makes a difference.

Focused links on WPKube simply have a dotted line around them.

We have already seen this in another example, so there is no need to go into how to achieve this in CSS again.

Nerd Fitness

Next is one of my favorite fitness websites. They also do a good job making their links stand out by coloring them in the brand’s red.

However, I specifically chose this hyperlink design example because it has a subtle effect for the hover state. The link color becomes slightly desaturated to give users feedback.

Here’s How to Do It

This is a simple effect, so it also doesn’t need a lot of markup to achieve. You simply have a color for the anchor tag and another for a:hover while there is a sitewide transition property to make the change less abrupt.

* {
    transition: all ease-in-out .25s;
    transition-property: all;
    transition-property: background,color,border,opacity;
}

a {
    color: #c73737;
    text-decoration: none;
}

a:hover {
    color: #d35e5e;
}

Apple

I included this example to show you that even the biggest companies with basically infinite design budget can go with a very basic approach. On the Apple homepage, links simply appear in blue and become underlined when hovered over (properly, via text-decoration). The outline for the focus state is simply slightly thicker than usual.

The Markup

Here is the code if you want to do a similar thing:

a {
    color: #2997ff;
}

a:hover {
    text-decoration: underline;
}

:focus {
    outline: 4px solid rgba(0,125,250,0.6);
    outline-offset: 1px;
}

Men’s Health

This magazine website brings a new idea to the table. At first, it seems business as usual: links on the page simply have an underline. The only thing that is noteworthy is that the line is slightly thicker than usual.

However, they have a trick up their sleeve for when you hover over the hyperlinks. To signal that, Men’s Health have chosen to use a background color as an indicator. The links turn yellow with just the tiniest of delays. A first among our hyperlink design examples.

CSS Code

The underlying markup for this is also noteworthy for another reason. To achieve the initial line for their links, the site uses the aforementioned and relatively new properties for controlling text-decoration.

a {
    text-decoration: underline;
    text-decoration-thickness: 0.125rem;
    text-decoration-color: #d2232e;
    text-underline-offset: 0.25rem;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

As you can see, both text-decoration-thickness, text-decoration-color, and text-underline-offset play a role in making the design look the way it does.

As for the hover effect, one thing that stands out is that it simply uses yellow as its color denomination.

a:hover {
    background-color: yellow;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

Outside of examples and test websites, this is a very rare way of declaring colors in CSS and it’s funny to see it out in the wild. Aside from that, you naturally find the transition property to make the appearance and disappearance of the hover background less abrupt.

National Geographic

National Geographic is going for a similar effect as Men’s Health, however, they achieve it very differently. Here, too, the hyperlink design is initially simple with thicker underlines. However, on hover, they go on to cover the entire linked word or phrase.

The interesting thing here is that the background appears to grow from the bottom up, so let’s look at how they did it.

How is This Possible?

First of all, here is the markup for the links in their normal state:

a {
    background-image: linear-gradient(120deg,#fc0,#fc0);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0;
    border: none;
    border-bottom: 2px solid #fc0;
    text-decoration: none;
    -webkit-transition: background-size .125s ease-in;
    -o-transition: background-size .125s ease-in;
    transition: background-size .125s ease-in;
}

As you can see, like in other hyperlink design examples, they achieve it with a simple border-bottom declaration. However, at the same time there is a background image positioned all the way to the bottom but with zero vertical size.

That is actually how they get the impression of growth, as on hover, it goes to 100% vertical size while the ease-in transition takes care of the fact that it appears gradually from the bottom.

a:hover {
    background-size: 100% 100%;
    border-color: #fc0;
    color: #000;
}

Twenty Twenty-Two

For the last examples, let’s look at how two WordPress default themes handle hyperlink design. The first one is Twenty Twenty-Two. There is nothing too spectacular going on, the usually solidly underlined links have a dashed line underneath on hover.

However, we haven’t seen this kind of manipulation yet, so I thought it would be a good thing to cover.

This is How it Works

The theme handles this in the way you would expect. The anchor tags have text-decoration: underline assigned to them and also values for their thickness and offset. Upon hover, it turns to text-decoration-style: dashed. That’s it.

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
    text-decoration-style: dashed;
}

Twenty Twenty-One

Our final example is Twenty Twenty-One. It has a similar hover effect as its predecessor, however, instead of a dashed line, it uses a dotted one.

But that’s not reason why I’m mentioning it here. Instead, the interesting part is its focus effect. Instead of the usual outline, the designers decided to use a contrasting background color to make it stand out.

The Accompanying CSS

How they achieved it is also interesting. As you can see from the markup below, the background color is basically white, however, it has its opacity set to 90%.

a:focus {
    outline: 2px solid transparent;
    text-decoration: underline 1px dotted currentColor;
    text-decoration-skip-ink: none;
    background: rgba(255, 255, 255, 0.9);
}

That way, you get this more subtle look that provides a clear contrast but is not too harsh.

Use These Examples for Your Own Hyperlink Design

Without links, what we call the Internet or World Wide Web would not be what it is. For that reason, hyperlinks deserve as much attention in your web design as other elements. After looking at the hyperlink design examples above, let’s summarize what we can take away from them:

• Mark your links clearly so that they are easy to recognize, the most common tools for that are colors, underscores, or both.
• Use hover effects to make sure that users can see their interaction with your links. There is a wide range of possibilities for that.
• Don’t neglect the focus state! Make it easy for users with different abilities to navigate your pages.

That’s it. Now you have a good basis to make design decisions about your own hyperlinks.

Which of the hyperlink design examples above do you like or dislike the most and why? What other design possibilities for links do you enjoy? Tell us in the comments below!

The post Hyperlink Design: 9 Examples from Real-Life Websites (Incl. CSS) appeared first on Torque.

In this post, I will review the WordPress block editor, that has found its way into the platform as part of the Gutenberg project. It has been around for four years and was one of the most controversial changes to ever happen to WordPress.

Now that it has had time to mature and because it is a topic laden with such emotions, I thought it would be a good idea for me to weigh in. As a professional WordPress blogger, I spend all day every day not only writing in WordPress but also testing every aspect of the platform over and over again for different articles. Naturally, that includes the block editor and its growing capabilities.

So, what follows is my personal review of the Gutenberg block editor from the perspective of a WordPress power user. I will talk about what I like, dislike, and what I think could be improved.

The WordPress Block Editor: A Definition

Before jumping into the pros and cons, let’s first quickly settle what exactly we are talking about. Because, when it first came out, Gutenberg only replaced the WordPress post and page editor. However, by now it has branched out to other parts of the user interface. So, to make sure we are on the same page, here’s what is part of Gutenberg.

Post/Page Editor

I already mentioned this. This is what you land on when you go to Posts/Pages > Add New or edit your existing content. The original Gutenberg implementation in WordPress 5.0 only exchanged this part of the editing experience by replacing TinyMCE, which is what WordPress was using before. Naturally, this is where you edit the content of your posts and pages but nothing template related.

Site Editor

First introduced as Full-Site Editing (FSE), this part of Gutenberg has now been re-christened to Site Editor. It is accessible via Appearance > Editor, when you are using a block theme like Twenty Twenty-Two or Twenty Twenty-Three. Here, WordPress allows you to edit your entire site architecture, including headers, footers, menus, page templates, widgets, and the homepage.

Template Editor

Something that a lot of people might not be aware of is that Gutenberg also includes a standalone editor for page or post templates. Again, this is only available for block themes. You can access it from the Page/Post Editor when you click on the name of the template used.

From there, you have the possibility to modify your current template or create custom page templates. It has a slightly different interface as the Site Editor but is overall very similar.

Widget Editor

This part is a bit outside of the rest of the block editor but it is officially part of the Gutenberg project, so I have to mention it here. By now, the block editor UI also extends to widget management. You can find it under Appearance > Widgets in classic themes. In block themes, as mentioned, widget handling happens inside the Site Editor.

To be honest, I don’t really have much to say about this. I don’t think it’s necessarily any better or worse than the old menu and it does its job. Therefore, I am not going dicuss the Widget Editor in detail below. If anyone else has strong feelings or opinions about this, I’d love to hear it in the comments!

Reviewing the Gutenberg Post/Page Editor

Now that we have an idea about what encompasses the Gutenberg block editor, let’s review how its various installments are performing. We are starting with the Post/Page Editor.

What I Like About It

First of all, I have to say I generally really like creating content with the block editor. I wouldn’t want to go back to Classic Editor, I am simply too used to the benefits of the new experience by now. Here are my reasons why.

Slick and Modern

All honor to TinyMCE, which is a true workhorse that has served WordPress well for a long time. However, let’s face it, it’s not the most modern-looking piece of software.

The classic editor experience is a bit clunky and constantly seemed stuck in the early 2000s. In contrast to that, Gutenberg or the block editor simply looks more up to date.

It is spacious, minimally designed, and clean. I also find it easy to discover all the important settings and information. I, for one, am not surprised it’s being adopted into other content management systems.

What You See is What You Get

Secondly, I enjoy that the editing experience is much more aligned with the finished result on the page. In TinyMCE, while you had the ability to add editor styles, you constantly had to preview the page to see what the content looks like on your site.

This goes especially for non-typical elements like buttons or forms. In TinyMCE, it was often necessary to add these via shortcodes. Consequently, you sometimes ended up with a document full of brackets for which you needed to know the meaning in order to decode what is going on.

In contrast to that, in the Gutenberg block editor, except for when explicitly using the shortcode block, you usually see the finished elements in the editor. Even if you don’t, at least you have a valid placeholder.

I find this very useful for adding visuals to content. Back in the day, I had to post a lot of things like “[screenshot]” in my articles in order to mark and find the places where I wanted to include images. In Gutenberg, I can simply add image blocks while writing and fill them when it’s time to add screenshots.

This is a great way to construct post content without having to switch back and forth. Of course, it’s not a perfectly parallel experience. For example, you often have to check whether images need a different alignment. But it’s much better than before.

Easy to Navigate

One thing I remember about the Classic Editor is: So. Much. Scrolling.

If I wanted to re-read an earlier passage or make changes to another part of the post, I had no other choice but to use the mousewheel. This made it easy to lose track of the overall content and sometimes hard to find specific locations.

That’s something that is completely different in the block editor. The menu that opens up when you click the little i icon on top left is actually one of the options I use most often.

It lets you review a breakdown of the entire post via its headings and Gutenberg allows you to jump to different sections with a click. This is so incredibly useful, especially if, like me, you tend to write very long pieces.

What Could Be Better

Of course, using the Post/Page Editor is not all roses and butterflies. It, too, comes with shortcomings, some of them I would call serious.

Performance

My main issue is the editor’s sometimes spotty performance. All that JavaScript necessary to run it can really take a toll on your browser.

Case in point, as I mentioned, I tend to write longer articles. On my own blog, posts are usually at least 3,000-4,000 words long, some way beyond that.

I recently upgraded to a new laptop and, I kid you not, one of the main reasons was that the block editor simply became unusable on my five-year old machine after a certain number of words,. It slowed down to a crawl and took so long to perform just normal tasks that I was sometimes forced to copy sections of a post into a new article, edit them there, and then copy them back. I don’t remember ever having to do that in the Classic Editor.

So, this is a serious area for improvement, even if things have already become better. There’s also something to be said about stability but I am getting to that further below.

Missing Keyboard Shortcuts

One of the things I most liked about the Classic Editor was its robust set of keyboard shortcuts. It easily lets you turn text into headings, change headings to a different order, or switch between ordered and unordered list. All without touching the mouse.

This is a part that’s simply missing from the block editor. While there are sensible keyboard shortcuts (find them in the menu in the upper right corner or by pressing Shift+Alt+H), they simply don’t cover as much as TinyMCE does.

Yes, there are slash commands to input any block of your liking (which is great). However, if I want to change existing text to a heading or switch from an h2 to an h3, I usually have to use the mouse.

Maybe that’s a personal pet peeve but it’s definitely something that could be better in my opinion.

Delving Into the Site Editor

Next up in this Gutenberg review, let’s talk about the Site Editor. Here, too, there’s a lot that’s good and some things that could be better. However, keep in mind that this is a project still in development (as exhibited by the beta tag next to its menu item).

Therefore, take some of what I mention below should with a grain of salt.

What the Site Editor Does Well

I am starting off with the things I think the Site Editor already excels at.

Very Powerful

There’s no denying that the Site Editor can do a lot and gives an incredible amount of power into the hands of non-technical users.

Customizing page templates, creating and changing headers, footers, and other site elements — just a few years back you would have to either know PHP, hire someone, or install a page builder plugin for that. Now, with the right theme, it’s a native function of WordPress and that’s simply great. In addition, the ability to change the entire style of your website with a single click is mind boggling.

Both allows non-developers to make very fundamental modifications to their sites and basically create custom themes by themselves. Especially since they can also export their changes to use on other websites. This is definitely progress and fully in keeping with why so many people love WordPress.

Block Patterns and Template Parts

Two tools that most help modify page content in decisive ways are block patterns and template parts. Being able to completely change the layout of a query loop or switch out the header and footer with just a few clicks is pretty priceless.

In addition, something that the developers really nailed is the ease with which you can add block patterns, including from the pattern directory. Simply copy and paste and they are immediately available where you need them. It allows you to build fully fleshed-out layouts in a very short time.

Room for Improvement

At the same time, there is a fair amount of criticism that you can level against this part of the block editor.

Not the Most User Friendly

While I admire the raw power that the Site Editor offers, it doesn’t always make it easy to wield it from the user’s perspective. While the user interface is condensed enough to serve well for editing pages and posts, the higher complexity of customizing your entire site means that you will often find yourself hunting for settings. The number of menus is limited, which means you often need to do a lot of clicks to achieve your goal.

Apart from that, it’s often the small things:

• Moving blocks in list view via the mouse is very hard. They often end up where you don’t want them.
• Generally, positioning page elements can be a bit of a drag (pun intended).
• Finding out where to do what can take a while, even for someone who is used to building websites.

By far the most confusing task is creating menus. To be honest, I’m not even sure I have understood it completely by this point. You sort of do it on the page, but there is also the Manage menus link in the block options that takes you to the old UI where you can’t really do anything.

I can see this causing a lot of frustration among users and find some of the criticism absolutely valid.

Lack of Documentation

This goes hand in hand with the above. While working with the Site Editor, I noticed that it’s very hard to find good help for specific problems, at least on Google. I know that there is the official support page and I don’t want to take away from the support team, who are doing a tremendous job.

However, the fact is that, more often than not, I had to figure out by trial and error how to perform certain tasks, because I couldn’t really find a good resource to fall back on. Especially when looking for help with specific block functions.

Maybe it’s also due to the fact that this is all pretty new but I found a distinct lack of good articles regarding the Site Editor.

Missing Functionality

Another thing that bothers me is that there are some things you simply can’t do with the Site Editor (yet). Examples include setting negative margins or creating box shadows (though it’s on the roadmap).

If I want to take advantage of any of that, I still need to use custom CSS. That’s a) something beginner users do not know and b) kind of defeats the purpose of the editor. At the very least, it forces you into a hybrid approach where you build the basic page structure and broad design strokes with the Site Editor but still have to go back to the style sheet for the final touches.

Of course, you can’t expect the editor to provide every single possible option CSS offers. However, sometimes the feature set still seems a little thin.

On the other hand, that’s simply the difficult position that the Site Editor is in. It’s not quite a page builder because it’s missing certain capabilities but is also far beyond a basic option like the WordPress Customizer. As a consequence, it ends up somwhere in that middle grey area which doesn’t always do it favors.

Stability

Finally, one of the biggest drawbacks of Full-Site Editing and a topic that needs to be part of any Gutenberg review is that of stability. The Site Editor is by far the one that I have seen the most crashes in.

In its defence, so far that has never led to big data loss, meaning, it was always pretty easy and quick do redo what I did before it crashed, which is mostly due to the excellent autosave function.

However, together with aforementioned performance problems, stability is definitely an area that deserves the most attention because it can get annoying really fast.

Template Editor

As mentioned, this is the editor tagged on to the Page/Post Editor. It’s a bit of a pared-down version of the Full-Site Editing experience.

I assume its purpose is to make changes to page templates on the fly, without having to go all the way back to the Site Editor. That’s generally a good idea, though I have to say that this is the part of the block editor that I have used the least. Therefore, my opinion towards it is relatively neutral. However, that doesn’t mean I don’t have one.

Here’s What I Like

Let’s see what the Template Editor has going for itself.

Good for Its Intended Use

If this editor’s purpose truly is changing templates on the go, I think it is doing a good enough job. You can modify the order of the featured image and page title, switch fonts and colors, or even change headers or footers.

So, when you are working on a page or post and notice that something about the template needs changing, you can do it quickly and easily. Alternatively, it’s also possible to create custom page templates right then and there. That way, you can apply changes only to that one page or assign them to other chosen content. Again, there is no code required for something that you definitely used to need a code editor before.

What I Couldn’t Get on Board With

On the other hand, here’s what I didn’t like that much.

Possibly Confusing for Beginners

The main problem I can imagine for the Template Editor is that it’s difficult for beginners, who don’t know that much about website building, to understand where they are supposed to do what. For example, that you are not supposed to fill the page with content in the Template Editor but only make structural changes to the template itself and then add content in the Page/Post Editor.

Here, too, it’s a bit of a question of how to put this much power into users’ hands without properly teaching them how to apply it.

Final Thoughts: Gutenberg Review

So there you have it, a review of the WordPress block editor and implementations of the Gutenberg project from someone who works with the platform professionally on a daily basis.

Even if I had a bunch of criticism, I am generally a big fan of the new editing experience. Especially the block editor for posts and pages is not something I would want to miss. Sure, there is room for improvement, but it is definitely already on a good level.

In addition, the above list is in no way exhaustive. I focused on the most important points that occurred to me in my work. There is more I could talk about both positively and negatively. However, these are the broad strokes. What’s your opinion?

Do you agree with my Gutenberg review? What’s your opinion of the block editor and how it has been implemented? Please share in the comments below!

The post Gutenberg Block Editor Review (By a WordPress Power User) appeared first on Torque.

While using custom web fonts is a great way to make your site more unique and distinguish your branding, it can also come with certain problems — from privacy to performance. The solution: host your fonts locally on your WordPress website instead.

To help you do so, in this post, we will tell you everything you need to know about this topic. Below, we discuss why it’s a good idea to host fonts locally in WordPress in the first place and then give you a rundown of code and no-code solutions to make it happen in both classic themes and WordPress block themes.

Hosting Web Fonts Locally vs Remotely

So, the first thing we probably have to talk about is what hosting fonts locally even means.

These days, a lot of people use so-called web fonts to change the typography on their websites. Those are font files that typically load from a third-party service, the most popular of which is Google Fonts.

It has a huge library of free fonts that you can use on your website by simply adding a special link to it. Then, when someone requests to see your site, they load remotely so that you can display them to visitors. Google Fonts is also integrated into many themes so that users can switch their font face very easily.

In contrast to that, when you host fonts locally, your font files don’t load from a remote server like Google’s but instead reside on your own server and visitors receive them from there. In the end, both achieve the same thing just in different ways.

Why Should You Locally Host Fonts in WordPress?

There are many good reasons to put font files on your own server instead of using a third-party solution:

• Privacy concerns — Especially if you are subject to European privacy laws, using web fonts particularly from Google can be problematic. The company collects visitor IP addresses and other information, which you need to mention in your privacy policy if you want to use them. Otherwise, you risk being fined. To avoid issues like this, many people simply opt to host fonts locally instead.
• Fond availability — The problem with using third-party hosted fonts is that you make yourself dependent on the service that provides them. If they go out of business, have a server breakdown, or if their URL changes for some reason, all of a sudden your site is without the typeface you chose. While that’s not likely in the case of Google, you never know, and crazier things have happened.
• Wider selection — While established libraries offer a wide range of different fonts, there is a lot more available that’s not in web font form. Consequently, knowing how to host fonts locally gives you many more possibilities to purchase and use premium fonts.
• Performance — When hosting your own fonts, you have full control over how they load. You can configure their caching and fix any issues on your own server. In addition, hosting your own fonts results in fewer HTTP requests as you don’t need to pull in data from another connection. All of the above is good for site performance.

Disadvantages and Caveats

At the same time, there are also some factors that speak against hosting fonts on your local server:

• Performance, again — Google Fonts especially are set up in way that offers high performance. They have a CDN to serve font files from the nearest server. In addition, many of the most popular fonts are already in most browsers’ caches. As a consequence, they load faster than your premium custom font. It’s the same reason why you shouldn’t host your own videos. For all the reasons above, it’s a good idea to use your own CDN if you are going to use local fonts.
• Higher complexity — Setting up your font files locally is more difficult than, say, going with the Google Fonts installed in your theme. However, as you will see below, unless you are going the completely manual route, it’s not that much harder. In fact, there are some one-click plugin solutions.

A Quick Word About File Formats

One thing you should know is that fonts are available in different formats, the most common of which are:

• TrueType Fonts (.ttf) — This is a font standard developed in the 1980s by Apple and Microsoft. It’s the most common format for operating systems and also usable on the web. While not the recommended file format, it’s a good fallback for older versions of Safari, iOS, and Android.
• OpenType Fonts (.otf) — Built on TrueType and developed and trademarked by Microsoft, the .otf format is for scalable computer fonts.
• Embedded OpenType Fonts (.eot) — This is a legacy format of OpenType for rendering on the web. It is required by older versions of Internet Explorer.
• Web Open Font Format (.woff) — WOFF was explicitly developed for use in web pages. It’s the OpenType/TrueType format with compression and extra metadata. This format is recommended for use by the W3C and supported by all major browsers.
• Web Open Font Format 2.0 (.woff2) — An improved version of .woff with better compression for faster download. Developed by Google and compatible with very modern browsers.
• SVG Fonts (.svg) — It’s also possible to use SVG shapes for fonts but this method is currently only supported by Safari.

So, which format should you choose? Of course, performance wise WOFF/WOFF2 makes the most sense. However, in order to be compatible with older browsers, including other formats is also useful. Plus, some providers, such as Google Fonts, only provide .ttf or similar formats for download. Luckily, there are ways around that, which we will show you momentarily.

However, keep the above in mind when procuring custom fonts for your website from a provider.

Hosting Fonts Locally in WordPress (Manually, Classic Themes)

At this point, we are finally going to talk about how to practically host fonts locally on your WordPress site. We have a bunch of different scenarios to cover and we are starting off with classic themes and the manual method.

This is the most technical approach, so you’ll learn the hardest method first before we go over easier solutions. Doing the whole thing by hand will help you understand the mechanics behind it and also improves your WordPress skills in the process.

1. Get Your Font Files

The first thing you need to host fonts locally is font files. Google Fonts allows you to download them but, as mentioned above, doesn’t yet provide the latest file formats. While you can theoretically turn their files into your desired format yourself, it’s much easier to use the Google Webfonts Helper instead.

Not only have they done the conversion work for you, the site also provides you with the necessary code for embedding your fonts.

The first thing you need to do here is choose a font of your liking. For that, you can either use the list on the left or the search field above it. When you have found your desired typeface (for this example we going with Advent Pro), it’s time to choose your character set and styles on the right.

First, check if you need Cyrillic, Greek, or Latin Extended characters. Below that, check the boxes for all the font styles you need. Be sure to pick only those you will actually use on your website so you don’t make visitors load stuff that they won’t even see.

Under Copy CSS, you can choose which file formats you will download.

Best Support setting includes .eot, .ttf, .svg, .woff, and .woff2 files while Modern Browsers only include the latter two. It’s usually a good idea to leave it at the default setting.

Once you are happy with your choices, scroll all the way down and click the big blue button to download your files.

2. Upload the Font Files to Your WordPress Site

Once you have the font files on your hard drive, the first step is to unzip them. After that, you need to get them up to your server.

For that, connect to it via an FTP client and navigate to your theme directory (inside wp-content > themes). Here, it makes sense to place the files inside their own directory, e.g. fonts. Therefore, first create the directory, then drag-and-drop your font files into your FTP client to upload them.

The files are small so this shouldn’t take very long and you can move on to the next step.

3. Load the Local Fonts in Your WordPress Theme

Next up, if you want to use the local fonts on your website, you need to load them first. For that, Google Webfonts Helper kindly already provides the necessary markup. You have probably seen it earlier.

At the bottom, you can customize the folder name, in case the one you have placed your files into is not called fonts. You should already have made your choices about whether you are using the code for highest compatibility or only for modern browsers earlier. Therefore, now it’s time to simply click into the field with the markup to mark it all, then copy it with Ctrl/Cmd+C.

After that, go to your theme’s folder on your server and open the style sheet (style.css). Here, paste the markup you copied earlier at its beginning.

Quick note: In order to use relative paths with @font-face, meaning if you want WordPress to access your local font files inside the fonts directory in your theme folder, you need to delete ../ in front of the URLs above. So, in my case, each line would look like this:

url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

This is assuming that your style.css file resides directly in your theme folder.

After you have made any necessary changes, save and re-upload the file and you are ready to use your local fonts on your WordPress site.

4. Eliminate Fonts Already Loading on Your Site

This step only applies if your theme already pulls in third-party fonts. You want to eliminate that for the aforementioned reasons as well as in order to not load the same font twice and also see if your local fonts have taken effect.

How to switch off third-party fonts depends on how they load in the first place. Some themes have dedicated options where you can switch to a system font or similar.

If, for some reason, they are hardcoded into your header.php file, you need to remove it from there (use a child theme for that). If they load via functions.php, you can remove the call from there. Do this in a child theme as well.

Finally, there is the Disable and Remove Google Fonts that you can try out. Autoptimize also has an option for removing Google Fonts, you can find it under the Extra tab.

4. Use Your Local Fonts

The last step is to actually assign your local fonts to elements on your site. For example, in the Twenty Twenty-One theme, you can use the following markup:

.entry-title {
	font-family: Advent Pro;
}

This results in your blog post titles appearing in the new Advent Pro font:

Hosting Local Fonts in Classic Themes: Plugin Edition

If the above is too complicated for you and your already have Google Fonts on your website (e.g. through a theme) you can also use a WordPress plugin solution to locally host your fonts. One of the best options for that is the OMGF or Optimize Google Fonts plugin that’s available for free in the WordPress directory. Install it in the usual way via Plugins > Add New.

Once you have done so, you find a new menu item under Settings, called Optimize Google Fonts. Click it to get to this menu:

Usage is pretty simple. In most cases, all you have to do is click Save & Optimize at the bottom. The plugin will then automatically find all Google Fonts style sheets on your site and replace them with local versions. You can see all of them at the bottom of the screen.

Here, you also have the option to configure the plugin not to load some of the fonts or font styles or pre-load them, which is important for typography that appears above the fold. There are some more settings but they are mostly for cases when something is not working.

OMGF also has paid a addon for installing more Google Fonts on your site. It’s very fairly priced and worth checking out. Other plugin options include Perfmatters and the Pro version of the aforementioned Disable and Remove Google Fonts plugin.

Manually Hosting Fonts in WordPress Block Themes

WordPress block themes also allow you to use local fonts. In fact, at the time of this writing, that’s all they do, you currently can not host third-party fonts in a block theme (though an API for that is in the making).

For that reason, the first few steps, acquiring font files and uploading them to your server, is the same as for classic themes. From there, the differences begin.

Loading Fonts Inside theme.json

In block themes, theme.json is the central file for styling and it is there that you set up the fonts. To do so, look for fontFamilies under settings and typography.

In block themes, new fonts are added using the following values:

• fontFamily — The name of the new font as it will be used in CSS. That means it can include fallback fonts.
• name — Name of the font that will appear in the WordPress back end.
• slug — A unique identifier that WordPress uses in the CSS custom property.
• fontFace — This corresponds to the CSS @font-face rule and is what really enqueues the font.

In order to work, fontFace includes several other pieces of information:

• fontFamily — The name of the font (again).
• fontWeight — A list of available font weights separated by spaces.
• fontStyle (optional) — You can set the font-style attribute here, e.g. normal or italic.
• fontStretch (optional) — For example, for font families that have a condensed version.
• src — Path to the local font file.

You can include several font files in fontFace, e.g. to load different styles. Separate them with curly brackets and a comma to do so. Here’s what this looks like for the same font example as above:

"fontFamilies": [
	{
		"fontFamily": "Advent Pro",
		"slug": "advent-pro",
		"fontFace": [
			{
				"fontFamily": "Advent Pro",
				"fontStyle": "normal",
				"fontWeight": "400",
				"src": [
					"file:./fonts/advent-pro-v19-latin-regular.woff"
				]
			},
			{
				"fontFamily": "Advent Pro",
				"fontStyle": "italic",
				"fontWeight": "400",
				"src": [
					"file:./fonts/advent-pro-v19-latin-italic.woff"
				]
			}
		]
	}
]

With the Gutenberg plugin active, you can also use wp_register_webfonts() inside functions.php instead, which is a new PHP function for this purpose that is not yet in Core. It takes the same arguments as above but in PHP format.

Local Fonts in Block Themes: Plugin Solution

Finally, it is also possible to locally host fonts in WordPress block themes with the help of plugins. One of them is the Create Block Theme plugin. After you install and activate it, it adds a new Manage theme fonts option to the Appearance menu.

Here, you can preview the font families included in your current theme as well as remove entire font families or single styles.

What’s even more interesting are the buttons saying Add Google Font and Add Local Font at the top. Let’s start with the Google Font option.

Using it is really easy. Click on its button and select your desired font from the drop-down list at the top. After that, tick the boxes for the font weights and styles that you want to add to your theme. Finally, click Add google fonts to your theme at the bottom.

The plugin will then automatically download and embed your chosen fonts so that they are available in the block and Site Editor.

The local font option works very similarly.

The difference here is that you upload a font file from your hard drive and have to provide the font’s name, style, and weight so that the theme knows what’s what (the plugin also automatically tries to recognize this information). That also means you need to upload your font files one by one. However, overall it’s super simple.

Are You Ready to Host Fonts Locally in WordPress?

Custom fonts are a popular way to spruce up your website. However, the ability to locally host them in WordPress is something that’s becoming more and more important because of performance, legal, and other reasons.

Above, we have gone over several ways to do so. You can either achieve it manually or using a plugin. There are also differences when using a block or classic theme though overall the principles are very similar. We hope you now feel up to the task.

How did you choose to locally host your fonts in WordPress? Let us know in the comments section!

The post How to Host Fonts Locally in WordPress (Classic & Block Themes!) appeared first on Torque.