Length:ShortLanguages:
Beautiful web fonts aren’t particularly difficult to find. A quick search
will undoubtedly turn up a number of attractive typefaces that
will complement your website’s look and messaging.
However, many of these fonts tend to have very specific use cases.
For instance, a wide font may be perfect for header text but would work
poorly in the body of your page. And certain decorative fonts are only appropriate for limited use–perhaps no more than a full-sized word or two within a design element.
With that in mind, we’d like to introduce you to a selection of the best web fonts that offer a bit more versatility. They go beyond standard looks,
yet are still able to be read at small sizes. Each one is available
with your subscription to Envato Elements, home to an ever-growing library of 2,500 web fonts and a whole lot more.
First, let’s take a look at some areas where these fonts can
really shine. Then, we’ll cover the basics of how to implement them into your
website.
Small Fonts, Big Possibilities
A well-designed website is all about the details. And while it’s
often the big, over-the-top design elements that grab our immediate
attention, the little things certainly shouldn’t be forgotten. It’s here where
users are compelled to stick around for a while.
The fonts in this showcase can help in both the big stuff
(headlines, hero areas) and the not-so-big (buttons, blockquotes,
sub-headings). This is good news for designers, as it offers the
potential for more consistency in our projects.
That means, for example, you can add more stylish accents that
reflect your brand across various areas of a website. A fancy font
becomes something you are just as likely to use in your site’s footer
as it is in the header.
Of course, legibility is still of utmost importance. So, be sure to test your designs and make adjustments as necessary.
How to Use a Custom Web Font
You can implement a custom web font into your site with just a few
easy steps. But you’ll want to note that it does require a little bit of
CSS to get going.
First, you’ll want to make sure that any fonts you download include a
version specifically created for the web. Envato Elements makes this
process easy with handy filtering options on the sidebar. For instance,
finding all of the fonts that are designed for use at smaller sizes
and 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: 'Fiona Regular'; /* Change to your font's name. */
src: url('fonts/Fiona-Regular.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: 'Fiona 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 Versatile Web Fonts
We’ve covered the what, why and how. Now, it’s time to discover some
fonts! Here’s a unique selection you can use to enhance your web
projects. And since we’re focusing on smaller sizes, we’ll also sprinkle
in some ideas as to where each may work best.
Fiona – An Elegant Typeface
Fiona offers up a classic, elegant style that can be used just about
anywhere. It would be a perfect fit for sub-headlines within
content or even a sidebar.
Millefleur | Sans Serif Font Duo
This selection is actually a package of two separate-but-related
fonts: Mille and Fleur. Mille is a traditional, easy-to-read bold font
while Fleur brings some uniquely-styled letterforms. Put them together
and you have a great combination for headings and subheadings.
Numhead Typeface
Numhead offers a techno-industrial look in three weights (light,
regular and bold). Each one is crystal-clear, giving you the freedom to
use the font all over. You might even consider utilizing it in short
passages of body text that you want to emphasize.
Bw Modelica Condensed font family
Talk about versatile, Bw Modelica Condensed is built to be utilized
virtually everywhere. The font comes in four widths, each with eight
weight variants. It’s everything you need to mix and match with
headlines, logos and even body text.
Borderland Font
While handwritten fonts are very popular these days, they can also
be difficult to read. That’s not the case with Borderland, as each
letterform is clear and legible. This one has the potential to be used
for all manner of design accents.
Riley – A Modern Typeface
With a detailed, vintage look, Riley will provide your project a
touch of class. And the unique style of its punctuation lends itself
to being used for quotes and other standout elements.
Little Hearts Font
Little Hearts is a fun, casual typeface that is perfect for sites
focused on crafts or kids. The included glyphs bring it to a whole new
level, with playful illustrations that can be used to decorate areas big
and small.
Solente
This art-deco slab font is reminiscent of those used in the early
20th century. The ligatures are incredibly detailed, and the package
also includes a set of alternates. Still, it might be most effective on
short bits of text like sub-headlines or call-to-action buttons.
Manurewah
An ultra-modern, square typeface, Manurewah offers both a
sophisticated and futuristic look. And, the use of capital and lowercase
letters also allows for some distinctive combinations. You might use
an all-caps look for large, single-word titles, with mixed-case text
used for better legibility on lengthier passages.
Rodian Serif
Featuring a sharp, clean look, Rodian Serif is a great choice for
attracting attention. You’ll find two styles and multiple font weights.
Of particular interest is the stencil variant. It stands out as very
unique, yet it also maintains legibility. Use it anywhere that you need
to add an extra bit of personality.
Small or Mighty
Unique fonts that can stand up to use at both larger and
smaller sizes are rare. Quite often, you’re limited to utilizing
a more decorative font on the former, while settling for something a
bit more ordinary on the latter.
However, our collection of the best web fonts for the job which we’ve shown here remove much of this compromise. While
each font may have its own specific limitations, each one also has a wider
range of potential uses. This opens up the door to a whole new world
of design possibilities.
Feel free to experiment with the fonts above and see how they can dress up your website!