iDevie
November 2019
M T W T F S S
« Oct    
 123
45678910
11121314151617
18192021222324
252627282930  

Categories


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:



Comments 0
There are currently no comments.