Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Fonts
Webdesign

The 10 Best Decorative Fonts to Use on Your Website

by
Length:ShortLanguages:

The fonts we choose play a major role within a website. The right font combination can make your site stand out from the crowd. In addition, they tie in with your brand to deliver just the right message.

Among the various font styles out there, decorative fonts are a great choice if you’re looking to make an impact. They offer a wide variety of looks ranging from elegant, to bold and all the way to avant-garde.

“Use decorative or display typefaces sparingly, such as on headlines and short copy.” – Pablo Stanley, The Design Team

Today, we’ll show you everything you need to know about using decorative fonts on your website in three simple parts. First, we’ll look at the areas of a website where these fonts tend to work best. The  second part is a crash course in the technical details with regards to installing and using them.

Finally, we’ll explore the 10 best decorative fonts available with your subscription to Envato Elements. You’ll be able to download fonts to your heart’s content, as there are over 1,800 decorative families available–and that number is growing.

Where to Use Decorative Fonts

As the term suggests, a decorative font is quite often meant to dress up specific design elements. Ideally, this is somewhere where they’ll call attention to an item of interest.

Carter Layered
Carter Layered; decorative and brimming with atmosphere

What that means for web designers is that these fonts should almost never be used as body text. Aesthetically speaking, they’re often designed to be viewed at larger font sizes. Thus, they can become very difficult to read on a smaller scale.

Not to worry, though! There are still plenty of places where decorative fonts are a great fit. Use them in hero areas or as headings within your content (page titles may be especially effective). You might also look to integrate them into calls to action, or even your logo.

How to Use a Custom Web Font

Implementing a custom font into your website is a fairly simple process that consists of just a few steps. However, it does involve a little bit of CSS to get up-and-running.

Before you start, you’ll want to make sure that any font you download includes versions specifically for the web. This is super-easy on Envato Elements, using the handy filtering options on the sidebar. For instance, finding all of the decorative fonts that include a web version only takes a couple of clicks.

decorative web fonts on Envato Elements
decorative web fonts on Envato Elements

Now, on to the steps:

1. Find a font you like and download it to your device.

2. Unzip the font package you’ve downloaded (remember to look for any web-specific fonts) and place the files into a folder within the root directory of your website. In our case, we’ll just call it “fonts”.

3. Upload the fonts to your web server, maintaining the directory structure you just created above.

4. Next, add each font using the CSS @font-face property, like so:

5. From there, you can call your font anywhere within your site’s CSS file. For example, if you’d like to use it with your H1 tag, you might add something like this:

If you run into any problems, use your browser’s inspection tools to verify that the font is installed correctly.

Download These Awesome Decorative Fonts

Now that we know a bit more about where and how to use decorative fonts on our website, let’s take a look at some outstanding examples. Each one has something unique to offer.

Helios

Available in both rounded and square-cornered versions, Helios can bring a high-tech look to your website. It would be a great fit for startups, developer portfolios and sites focused on science.

Helios Typeface
Helios Typeface

Black Night - Horror Typeface

Perfect for getting into the spooky spirit, Black Night could be used for a Halloween-themed landing page or even a web comic. It’s fun, easy to read decorative fonts and will add personality to any website.

Black night - Horror Typeface
Black night - Horror Typeface

Whale of a Time Font Duo

Whale of a Time brings a light and uplifting feel. Available in striped or solid fill, either style would go great with hand drawn illustrations or websites focused on children.

Whale of a Time Font Duo
Whale of a Time Font Duo

Macloney - Bold Serif Font

This bold and sophisticated serif font offers a surefire way to get a user’s attention. Use it for page titles, headlines or other spots where you need to attract eyeballs.

Macloney - Bold Serif Font
Macloney - Bold Serif Font

The Roseberry - Font Trio

The Roseberry evokes a handcrafted, retro look. Each of its three styles (Codet, Outline and Solid) will help you create an old-fashioned vibe. It’s a highly-detailed decorative font and looks great at larger sizes.

The Roseberry - Font Trio
The Roseberry - Font Trio

Cherie Bomb

For those looking for something a bit wilder, Cherie Bomb is a great pick. A script font with a flair reminiscent of the 1980s, it can bring instant attention to call to actions or even logos.

Cherie Bomb
Cherie Bomb

Cormier

With a regal, art deco style, Cormier can bring a touch of class to your website. Use any of its three included styles (Regular, Double or Rough) for decorative headlines, hero areas and more.

Cormier
Cormier

Motters Typeface

Handwritten fonts like Motters Typeface are very popular these days, and it’s easy to see why. They add a touch of authenticity that helps to make a connection with users. This one is exceptionally clean and legible.

Motters Typeface
Motters Typeface

Paraoh - Sacred Font

Looking to make a bold statement? Then you’ll definitely want to check out Paraoh. Its unique, symbolic letterforms are sure to make a lasting impression.

Paraoh - Sacred Font
Paraoh - Sacred Font

Xaviera - Modern Typeface + WebFonts

Xaviera is proof that a decorative font doesn’t have to be outrageous or overly-dramatic. This sans-serif font is simple, beautiful and easy to read. It would be a terrific choice for blog headlines or page titles.

Xaviera - Modern Typeface  WebFonts
Xaviera - Modern Typeface + WebFonts

Decorate Your Website!

Typography is one of the easiest ways to add character to your website while also reinforcing your brand. And with the sheer number of available web fonts, there is virtually no limit to type of look you can achieve.

Decorative fonts are especially suited to the task. Even when used sparingly, their uniqueness helps you establish both focal points and identity. They are truly one of the most powerful pieces within any web designer’s toolbox.

More Web Font Resources

Variable Fonts on the Web

Lastly, do you have three minutes to spare? Why not learn even more about web typography with Kezz Bracey, as she explains variable fonts on the web:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.