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.
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.
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:
@font-face {
font-family: 'Helios Regular'; /* Change to your font's name. */
src: url('fonts/Helios Regular.woff'); /* Change to match your font file's location. */
}
@font-face {
font-family: 'Helios Rounded'; /* Change to your font's name. */
src: url('fonts/Helios Rounded.woff'); /* Change to match your font file's location. */
}
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:
h1 {
font-family: ‘Helios Regular’; /* Change to your font's name. */
}
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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: