Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets Starting at only $16.50/month!

DOWNLOAD NOW

Setting up the Structure

Our journey into the deep sea starts with a simple HTML structure: a div element with the class underwater, wrapping around an h1 tag.

<div class="underwater">
	<h1>1stWebDesigner</h1>
</div>

Achieving the Underwater Effect

For our underwater CSS text effect, we introduce a range of CSS properties such as background-image, animation, and -webkit-background-clip.

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@700&display=swap');

body{
	/* Using a dark background color for optimal contrast */
	background-color: #000;
	font-family: 'Maven Pro', sans-serif;
}

.underwater h1{
	/* Font settings: sizing and a semi-transparent color */
	font-size: 2.5rem;
	color: #2c3e5010;
	
	/* Assigning an underwater image as the background */
	background-image: url('https://w7.pngwing.com/pngs/183/509/png-transparent-under-water-scenery-sunlight-underwater-ray-star-ocean-atmosphere-cloud-computer-wallpaper.png');
	
	/* Clipping the background image to the outline of the text */
	-webkit-background-clip:text;
	
	/* Setting a 10s infinite animation for a dynamic effect */
	animation: waterEffect 10s infinite;
}

/* Animation to simulate flowing water */
@keyframes waterEffect {
	0% { background-position: left 0 top 0; }
	100% { background-position: left 100% top 0; }
}

Explaining Key CSS Properties and Values

Breaking down our CSS code, the first point of interest is the background-image property. By setting an underwater image as the background, we immediately set the tone for our effect.

The -webkit-background-clip:text property clips the background image to the shape of the text. It allows the underwater image to fill the text, setting the stage for our effect.

The color property plays a vital role as well. We’re using a semi-transparent color (color: #2c3e5010;), where the last two digits 10 represent the alpha channel in hexadecimal format, controlling the transparency. This enables the background image to shine through, enhancing the underwater illusion.

The animation property sets our waterEffect animation into motion. Defined by the @keyframes rule, it continuously shifts the background-position from left 0 top 0 to left 100% top 0, creating the illusion of water flowing over the text.

The Result

See the Pen Underwater Text Effect by 1stWebDesigner (@firstwebdesigner) on CodePen.

Exploring Other Methods

Different methods can achieve similar effects. An alternate approach involves utilizing the clip-path property with CSS animations, yielding a wavy text appearance akin to an underwater CSS text effect. This method manipulates the clip region of an element over time, evoking a dynamic sense of movement reminiscent of water’s rhythmic flow. In addition, the technique doesn’t necessitate a background image, instead, it transforms the appearance of the text directly. By turning to this method, you’re exposed to yet another aspect of CSS and its potential for dynamic text effects.

So, let’s demonstrate how a seemingly complex effect can be achieved with a few lines of code.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month! DOWNLOAD NOW

Setting Up the Text in the HTML

We begin by defining our text element in HTML, which in this case is a simple heading:

<h1 class="animated-gradient">1stWebDesigner</h1>

Here, we create an <h1> element with a class called “animated-gradient”. This class becomes our anchor for creating the gradient animation in CSS.

Unfolding the Gradient Animation

The core part lies within our CSS. Let’s define the gradient and set it in motion with the following code:

/* Google Fonts for Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

/* Define animation */
@keyframes gradient-shift {
  0% {background-position: 0%}
  100% {background-position: 100%}
}

/* Styling our animated gradient text */
.animated-gradient {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  background: linear-gradient(270deg, #ff4b59, #ff9057, #ffc764, #50e3c2, #4a90e2, #b8e986, #ff4b59);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

Our CSS setup does the following:

• @import url: This directive fetches the Open Sans font from Google Fonts, noted for its modern and clean aesthetics.
• @keyframes: Here, we define an animation named gradient-shift. This animation creates the illusion of motion in the gradient by shifting the background’s position from 0% to 100%.
• font-family and font-size: These properties set our text’s font to Open Sans and its size to 2em.
• background: This property generates a linear gradient using a striking array of colors. The gradient direction is set to 270 degrees, providing a left-to-right color flow.
• background-size: This property, set to 200%, enlarges the background, contributing to the illusion of movement.
• -webkit-background-clip and -webkit-text-fill-color: These properties render the text transparent, allowing the animated gradient to shine through.
• animation: Lastly, we deploy our gradient-shift animation. It uses an ease-in-out timing function for smooth transitions and loops indefinitely, creating an ever-changing cascade of colors.

The Result

And there we have it! Check out the vibrant, animated gradient text:

See the Pen Animated Gradient Text by 1stWebDesigner (@firstwebdesigner) on CodePen.

Final Thoughts

The process of creating the animated gradient text effect is surprisingly straightforward, but the creative opportunities it unveils are far-reaching. With this foundational knowledge, you can experiment with different color schemes and gradient directions, apply the animation to various elements like buttons or headers, and even incorporate subtle animated accents into your design.

Remember, the real beauty of CSS is in its flexibility and power – it provides a vast canvas for creativity. You could also explore further with CSS keyframes to manipulate other properties and add more dynamic animations to your design. Feel free to dive deeper into the world of CSS animations with our guide on CSS keyframes.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

HTML Setup

We start with a basic HTML setup – a <div> element with a class of embossed-text:

<div class="embossed-text">
  Embossed
</div>

Creating the CSS Text Embossing Effect

Next, we turn our attention to the CSS, which gives us the desired embossing effect. We’re using the bold and distinctive Truculenta font:

@import url("https://fonts.googleapis.com/css2?family=Truculenta:wght@900&display=swap");

.embossed-text {
 font-family: "Truculenta", sans-serif; /* Set the font to Truculenta */
 font-size: 4em; /* Increase the text size */
 background: #f8bf32; /* Set the warm, summer-like background color */
 color: #2b1e0d; /* Set a rich dark color for the text */
 text-align: center; /* Center align the text */
 padding: 50px; /* Add padding around the text */
 box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Create depth with a box shadow */
 text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6),
  3px 3px 3px rgba(0, 0, 0, 0.4); /* Create the embossed effect */
}

Let’s break down each CSS property:

• font-family: 'Truculenta', sans-serif; – This sets our text font to Truculenta, a bold and punchy font that is excellent for effects like this.
• font-size: 4em; – This sets the size of our text, making it large enough and noticeable. An embossed effect works well with larger font sizes, and 4em is a suitable size for demonstration.
• background: #F8BF32; and color: #2B1E0D; – These set the background color of our container to a warm summer color, and the text color to a rich dark tone. The contrast between the two colors enhances the embossed effect.
• text-align: center; and padding: 50px; – These center our text and provide padding around it, ensuring the embossed text is well-positioned and well-spaced.
• box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); – This adds a box shadow around our container, enhancing the depth effect.
• text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6), 3px 3px 3px rgba(0, 0, 0, 0.4); – This property is the main focus, creating the embossed effect. The text-shadow property is defined by two shadows here:
  • A light shadow is positioned at the top left (-2px -2px 1px rgba(255, 255, 255, 0.6)). This acts like a light source, contributing to the illusion of depth.
  • A darker shadow is applied at the bottom right (3px 3px 3px rgba(0, 0, 0, 0.4)). This adds to the effect by mimicking a shadow, further enhancing the embossed look.

Through these simple steps, you’ve created an embossed text effect using CSS.

The Result

See the Pen Spinner Loader with Pure CSS by 1stWebDesigner (@firstwebdesigner) on CodePen.

Final Thoughts

Adding an embossed effect to your text with CSS can introduce a subtle, tactile element to your website. As a designer, it’s one more tool in your toolkit to help differentiate your site. Remember, though, that like all design elements, it should be used thoughtfully and not in excess. It works best when applied to headers or highlighted text, where it can add emphasis without being overbearing.

The beauty of CSS lies in its flexibility and depth. With some experimentation, you can adapt this CSS text embossing effect to suit your design aesthetic. Enjoy exploring the possibilities!

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Understanding Minimalist Typography

At its core, minimalist typography embraces simplicity. It drops unnecessary decorations, focusing on visual appeal and functional design that boosts readability. Sans-serif typefaces, appreciated for their clean lines and generous white space, are a frequent choice in minimalist typography. This focus on functionality and elegance ensures the design’s core message and content shines through, unhindered and dominant.

Now, let’s take a closer look at our top 10 minimalist font recommendations.

Roboto

Roboto, a font you’ve likely encountered on the web or in apps, combines mechanical and geometric forms. Its 12 distinct styles make it a versatile choice for an array of minimalist designs, from website headers to the UIs of mobile applications. Its universal appeal and wide language support make Roboto a popular choice for digital design.

Open Sans

Open Sans, another ubiquitous font, stands out with upright stress and open forms, conveying a friendly yet neutral demeanor. Its extensive character set enhances readability at small sizes, cementing its status as a reliable choice for body text in minimalist designs.

Lato

Lato, with semi-rounded details in its letters, communicates warmth without losing its professional essence. The font family’s ten styles offer designers flexibility to meet various design needs, from commanding headlines to nuanced captions.

Montserrat

Inspired by the geometric sans-serif style, Montserrat offers modern, clean character designs. With 18 styles, from thin to black, it caters to a broad spectrum of minimalist designs, be it unobtrusive body text or bold headlines.

Raleway

Raleway’s elegance and sophistication are accentuated by its distinctive ‘w’ and ‘k’ characters, adding visual interest without compromising readability. With nine weights, this font is especially well-suited for headers and large text in minimalist designs.

Arimo

Designed by Steve Matteson, Arimo is a breath of fresh air with its crisp sans-serif design. It stands out with enhanced on-screen readability characteristics, making it an excellent choice for cross-platform document portability.

Poppins

With its geometric sans-serif design, Poppins exudes a clean, modern aesthetic. Its balanced letterforms, available in nine weights, support high readability at both large and small sizes, making it a versatile addition to any minimalist design toolkit.

Oswald

By reinterpreting the classic gothic type style for the digital age, Oswald’s condensed letterforms create a versatile typeface. Offering six weights, Oswald lends itself to a variety of minimalist design applications, from dense body text to airy headers.

Fira Sans

Designed for Mozilla, Fira Sans is a humanist sans-serif typeface. It boasts excellent readability across sizes, thanks to its generous x-height and open apertures. Its broad range of weights make it adaptable for diverse design needs.

Noto Sans

Noto Sans, a part of Google’s mission to support all languages with a harmonious typeface, impresses with its clean, simple forms. Available in regular and bold weights, its unfussy design is a perfect fit for minimalist aesthetics.

While these fonts are free and ready for download on Google Fonts, making them accessible for designers on any budget, they offer significant advantages. They are open-source, web-optimized, and incredibly versatile, catering to an extensive array of design needs and platforms.

Final Thoughts

Typography underpins minimalist design, and your font selections can significantly influence the viewer’s perception.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month! DOWNLOAD NOW

To disable text selection highlighting in CSS, you can set the value of the user-select property to none:

body {
   -webkit-user-select: none;  /* for Safari */
   -moz-user-select: none;     /* for Firefox */
   -ms-user-select: none;      /* for Internet Explorer */
   user-select: none;          /* for modern browsers */
}

In this example, the user-select property is applied to the body element, which means that text selection highlighting will be disabled for the entire page. If you want to disable text selection highlighting for a specific element, simply apply the property to that element instead of the body element.

It’s important to note that the -webkit-user-select and -moz-user-select properties are vendor-specific extensions, and are used to ensure compatibility with Safari and Firefox, respectively. The -ms-user-select property is used for compatibility with Internet Explorer. The standard user-select property should work in all modern browsers.

That is the ultimate question when it comes to typography. And, unfortunately, there is no one-size-fits-all answer. It all depends on the specific project you’re working on and what kind of message you’re trying to communicate.

However, we can narrow it down to a few general categories.

Here are 11 popular typography styles to consider for your next project.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month! DOWNLOAD NOW

1. Serif

Serif fonts are the ones with the little feet (serifs) on the end of each letter. They are classic and elegant, and they have been around for centuries. Think of Times New Roman or Garamond – these are both serif fonts.

Serif fonts are generally seen as being more formal and traditional than other types of fonts. They are often used for headlines, logos, and other high-impact pieces.

2. Sans Serif

Sans serif fonts are the exact opposite of serif fonts. They have no little feet on the end of the letters, hence the name “sans serif.”

Sans serif fonts are generally seen as being more modern and clean than serif fonts. They are often used for body copy, menus, and other pieces where readability is key.

3. Script

Script fonts are designed to look like they were written by hand. They are usually very flowing and cursive, and they can be difficult to read if they are used for large blocks of text.

Script fonts are best used for small pieces, such as headlines or logos. They can also be used for body copy, but only if the design is very simple and easy to read. A good example would be the Adelia Font.

4. Display

Display fonts are any type of font that is designed to be used at large sizes. They are often very bold and eye-catching, and they can be difficult to read at smaller sizes.

Display fonts are best used for headlines, logos, and other short pieces of text. They should not be used for body copy or any other type of long-form text. A good example that shows how bold these fonts can be is Arbutus.

5. Decorative

Decorative fonts are just what they sound like – they are designed to be used for decorative purposes only. They are often very ornate and can be difficult to read.

Decorative fonts should only be used sparingly, if at all. They can be used for headlines or logos, but they should never be used for body copy. They are a lot of fun though. Just check out the Space Time font.

6. Blackletter

Blackletter fonts are a type of serif font that is designed to look like it was written in the Middle Ages. They are very ornate and can be difficult to read. It also goes by the name of gothic script or Old English.

Cloister Black is a great example of a blackletter font that encapsulates this old-fashioned style.

7. Handwritten

Handwritten fonts are designed to look like they were written by hand. They can be either serif or sans serif, but they usually have a more organic feel than other types of fonts.

Handwritten fonts are best used for small pieces, such as headlines or logos. The Autography Font illustrates this typography style well.

8. Slab Serif

Slab serif fonts are a type of serif font that is designed to be used at large sizes. They are often very bold and eye-catching, and they can be difficult to read at smaller sizes.

Slab serif fonts are ideal for headlines, logos, and titles. They should not be used for body copy or any other type of long-form text though as the line weight is too thick for the confined spaces of paragraphs. The Rosette Font has a chunky look that serves as a good example of a slab serif.

9. Geometric

Geometric fonts are designed to be very clean and simple. They often have straight lines and angles and rely on a geometric construction to achieve their letter shapes.

This kind of font is best used for headlines or logos, or any other spot where just a few words are needed. They can also be used for body copy, but only if the design is very simple, large, and easy to read.

10. Grotesque

Grotesque fonts are a type of sans serif font that is designed to be used at large sizes. Historically, they’re known for looking a bit awkward and unusual.

It is advisable to only use grotesque fonts for headlines, logos, and other brief pieces of text. They are not meant to be used for paragraphs or long stretches of text. Work Sans is a great example of a neo-grotesque style.

11. Humanistic

Humanistic fonts are sans serif fonts as well that are designed to look very natural and organic. They often have curved lines and softened edges.

Humanistic fonts are most successful when used for titles, headlines, or logos. They can also be readable if used sparingly in body copy with a simple design layout. You can look to the Centaur Font as a good example of this classic font style.

Let Typography Style Options Inspire You

There you have it! These are the 11 most common types of fonts that you’ll see used in graphic design. As you can see, each one has its own unique purpose and should be used accordingly.

When it comes to choosing the right font for your project, it’s important to think about the overall style you’re going for. Do you want something clean and modern? Or are you going for a more vintage or retro feel?

Once you have a general idea of the style you’re after, you can start browsing through different font options until you find one that fits your vision. Good luck!

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Font Roundup

Likely Story

VJ Type

Arthur Simonini

Martine Syms

Mama Joyce Peppa Sauce

Slava Kirilenko

DAD Agency

Pact Media

Dante

Custo

Houseplant

Santa Teresa Fest

Kim Kneipp

Panic Studio

CSS Perspective Text Hover

A nifty stair climbing animation on hover.

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

LOVE Text Effect

Here’s an unusual typing effect.

See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.

CSS-Only Shimmering Neon Text

A very cool shimmering neon text effect made with pure CSS.

See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.

Terminal Text Effect

Another typing effect, this time replicating a terminal with a blinking cursor.

See the Pen Terminal Text Effect by Tobias (@Tbgse) on CodePen.

Flashing Neon Text

This one has the appearance of a neon sign flashing on and off, coded in only CSS.

See the Pen CSS Text-FX by moklick (@moklick) on CodePen.

GSAP Text Animation

Here’s an interesting animated text effect that brings letters together into words.

See the Pen GSAP Text Animation by Nate Wiley (@natewiley) on CodePen.

Silent Movie Text Effect

This effect makes makes the text look like an old silent movie, all done with pure CSS.

See the Pen Silent Movie Text Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.

Pure CSS Shimmer Text Effect

A smooth animated shimmering text effect, again in only pure CSS.

See the Pen CSS Shimmer Text Effect by Robert Douglas (@redouglas) on CodePen.

Fluid Text Hover

Very nice text effect that makes the background masked by the text flow fluidly with the mouse direction.

See the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen.

Fly In, Fly Out

Simple but effective text effect where the letters fly in from the top and out through the bottom.

See the Pen Fly in, fly out by Neil Carpenter (@neilcarpenter) on CodePen.

Repellers

An interesting text effect in which the text repels away from the mouse movement.

See the Pen Repellers by Johan Karlsson (@DonKarlssonSan) on CodePen.

3D Text Effect On Mousemove

Moving the mouse makes a cool 3D text effect in this example.

See the Pen 3d Text effect – mousemove by Dennis Garrn (@dennisgarrn) on CodePen.

Cool Pure CSS Text Effect

A nice masked background animation.

See the Pen (cool) text effect by Hakkam Abdullah (@Moslim) on CodePen.

Bubbling Text Effect

A clean bubbling animation to use in headers or however you’d like, made with CSS and jQuery.

See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.

Flickering Light Text Effect

This animation simulates a flickering light bulb within the text.

See the Pen Flickering Light Text Effect by Mandy Michael (@mandymichael) on CodePen.

Matrix Text Effect

This one needs no introduction or explanation.

See the Pen Matrix Text Effect by Collin Henderson (@syropian) on CodePen.

Opening Sequence

A smooth text effect that replicates the opening sequence of a movie or trailer.

See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.

Sliding Text Effect

A cool animation that responds to mouse movements.

See the Pen Sliding text effect by ChenXin_nth (@chenxinnn) on CodePen.

Black Mirror Cracked Text Effect

An unusual effect that makes the text crack apart, done in pure CSS.

See the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.

Text Effect

Hover over the text to see an unusual effect.

See the Pen Text Effect by Max Nguyen (@maxnguyen) on CodePen.

In/Out of Focus Text Effect

Here’s another unusual pure CSS animated text effect.

See the Pen In/out of focus text effect by Jonny Scholes (@jonnyscholes) on CodePen.

Futuristic Resolving/Typing Text Effect

Each letter rotates into position as it is typed in this interesting effect.

See the Pen Futuristic Resolving/Typing Text Effect feat. GLaDOS by Kevin (@qkevinto) on CodePen.

Shadow and Pattern Text Effects

Here’s a few hover effects in pure CSS.

See the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan (@ashleynolan) on CodePen.

Spotlight Cursor Text Screen

Very nicely done cursor-following effect.

See the Pen Spotlight Cursor Text Screen by Caroline Artz (@carolineartz) on CodePen.

Wave Text Effect (With SVG/Blend Mode)

A relatively simple CSS only animated masked text effect using SVG with blend mode.

See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen.

Particle Text Effect

A nice animation that you can control the speed by dragging your mouse over it.

See the Pen Particle Text Effect by Tom (@tomncurry) on CodePen.

Glitch Text

A pure CSS glitchy text effect.

See the Pen Glitch Text by Fabio (@fabiowallner) on CodePen.

How will you use these CSS text effects?

We hope you’ve enjoyed the creative examples we found and shared with you, and can use any of them in your projects. Be sure to check out our collections of CSS code snippets too!

And let me tell you, there’s no shortage of fantastic fonts to choose from out there. But getting them actually installed in WordPress can be a bit of a challenge, especially if you’ve never done it before. That’s precisely what we’ll be discussing here today. But first, let’s pause briefly to talk about where to find fonts in the first place.

Select Your Fonts

If you want to use fonts outside the standard staples like Arial and Helvetica, you’ll need to install them into WordPress. And before that, you’ll need to source them. Though more resources exist, this is a quick list of the most popular sites where you can get fonts:

• Google Fonts. This free resource offers up nearly a thousand font families to choose from.
• Adobe Fonts. Formerly called Typekit, the thousands of fonts listed here are all included in a Creative Cloud subscription.
• Font Squirrel. Here’s another great resource filled with free fonts. These have been collected from other websites.
• Fonts.com. A tried and true standard in font offerings. You can find free and premium options here.

Use a Plugin to Load Google or Adobe Fonts in WordPress

Now, let’s get to the part of this article you came here for: the tutorial. Your first option for loading Google Fonts or Adobe fonts in WordPress is through the use of a plugin. This will likely be the quickest and easiest option for most website owners, which is why we’re featuring it first.

Custom Fonts

Custom Fonts is a WordPress plugin that makes it easy to add custom font files to WordPress. It supports .woff, .woff2, .ttf, .svg, .otf, and .eot formats. And it’s easy to set up. After install, just upload your chosen fonts and they will be automatically added to whichever page builder you use. This plugin works best with Beaver Builder, Elementor, and Astra.

Use Any Font

Another plugin option is Use Any Font. The aptly named plugin requires no CSS to use and allows you to add custom fonts from any source to WordPress. You won’t be pulling from another server here, so your fonts will always be available to load every time.

Easy Google Fonts

Our third option here is Easy Google Fonts. As you might’ve guessed from its name, this plugin makes it easy to install Google Fonts into WordPress. It integrates with the built-in WordPress customizer, so once installed, your fonts will be automatically accessible from within this editing tool, in real-time.

Add Google Fonts to WordPress Manually

If the plugin route won’t suit your needs or if you just need more specific control over where your fonts will appear, you can add them manually into WordPress.

To begin, you’ll need to go to Google Fonts and make a selection. Once you’ve picked out a font type/family, click through to that specific font’s page.

From there, you can choose from a variety of styles. You can add them to your font family. Once you’re done with this selection process, click over to the Embed tab.

An embed code should now be visible. Copy this code.

Next, login into WordPress and paste this code into the <head> section of your chosen theme. You’ll definitely want to make a copy of your site’s files first before you do this and/or make a child theme. You’ll be pasting this code into the header.php file.

Alternatively, you can also choose to enqueue your new fonts through your theme’s functions.php file.

Save your changes. Then, go back to the Google Fonts page for your chosen font. Right below the embed code you previously copied; you should see a bit of CSS.

Copy the CSS. Now go to the Customizer in WordPress (Appearance > Customize) for your theme. There should be a spot for Additional CSS. Paste this bit of CSS code there to apply your font site-wide by assigning it to the body element, or just specific items like headers or navigation. Don’t forget to click Publish when you’re done.

11,000+

Icons

20,000+

Illustrations

DOWNLOAD NOW

14,000+

UI & UX Kits

16,000+

Web Templates

Add Adobe (Typekit) Fonts to WordPress Manually

Typekit fonts are now known as Adobe Fonts and you can get them when you sign up for a Creative Cloud subscription. You can use these custom fonts however you’d like – including on your WordPress site. To add them manually, you’ll follow a similar procedure as described for Google Fonts, but let’s break it down in detail.

First of all, you need to select the font you want to use. Once you find one you want, click the toggle button next to it that says Activate font.

From here, you’ll need to click the link that says < / >Add to Web Project.

Give your project a name and toggle the various font styles and weights associated with your chosen font. Click Create Project when you’re done making changes.

From here on out, the process is identical to adding Google Fonts. Just grab the embed code from Adobe Fonts and paste it into the <head> tag in your site’s header.php file. Add the CSS snippet to the Customizer and you’ll be good to go.

Load Google or Adobe Fonts in WordPress Properly

Making customizations to your site’s design can be an exciting prospect. However, it’s vital that you do it right. Failing to install or load fonts correctly can mean slower site load times and even poor functionality. Why leave it to chance? Follow the instructions offered here and prep your fonts the right way.

To help you get started on your next design, we’ve compiled a list of 18 fonts here that fit the bill. Many of these are free modern fonts that you can get started with using immediately. Enjoy!

Rothko Modern Art Deco Display Font

This lovely font embraces the art deco style on the 1920s while still looking entirely modern and of today.

Arapey

Arapey is a straightforward-looking font that can be used for any number of purposes. It’s sophisticated and simple.

KINFOLK – Modern Serif Font

The Kinfolk font is described as a modern serif selection. It offers a traditional look with a feel choice design elements that make it stand out from the pack.

Modern Leaves

Here’s another lovely choice. Modern Leaves features letter styles with irregular heights that make it ideally suited for titles, headeres, and graphics.

Sundays – Modern Serif Font

The Sundays font is delightfully simple and that’s precisely why it’s so appealing. Get your point across without overwhelming viewers.

Butler

Butler is a chunky font that’s perfect for titles and graphics. It allows you to demand attention and be bold while maintaining a modern appeal.

Rylan – Modern Serif w/ Free Extras

Rylan is another lovely choice for a serif font. It features elements of more classic fonts yet embraces unique angles for specific letters that make it stand out.

Moderna

The aptly named Moderna font looks almost futuristic but not alienating. The letters are rounded but still entirely legible.

Heather Oliver – A Modern Script

If you’re looking for something a bit fancier, the Heather Oliver font delivers. This script font is modern and versatile.

Modern Fantasy

The Modern Fantasy font offers a whimsical look that can be applied to many different types of projects. From website headers to marketing materials, this one can serve you well.

Permian Serif

The Permian Serif font is simple, straightforward, and classic. But, it’s not stodgy and manages to offer a modern spin on a traditional style.

The Chic & Unique Modern Font Bundle

This font bundle can be applied to a wide number of situations and offers several fonts that fit the modern moniker.

Mr Eaves

The Mr Eaves font offers a combination of styles that work well together. This sans serif font is slightly bubbly but still clean and readable, making it useful for many projects.

Soria

Another option is the Soria font. This one is a serif offering that includes elements of script fonts as well and would add an air of elegance to any project you create.

Latin Modern Mono Font Family

The Latin Modern Mono font is highly reminiscent of typewriter fonts with a modern twist and flair.

Top Modern

Another option is the Top Modern font. This one is a serif font that has much of the appeal of traditional options without looking boring or redundant.

Modern 216

Modern 216 is a serif font with larger than-you’d-expect spacing, and a flatten of the letter heights that make it stand out as a modern choice.

Computer Modern Font Family

Last on our list is the Computer Modern Font Family. This selection is a sans serif choice that’s simple and modern, all while giving off a decidedly tech look.

Use These Modern Fonts in Your Next Project

There’s no reason to wait around before trying something new for your next design. This collection of free and premium modern fonts will elevate your work and convey confidence for your customers and clients. So, take a look and get started! Be sure to check out our other modern font collections too!