The Ultimate Guide to Web Safe Fonts

March 29, 2022

Tory Barber

Ultimate Guide to Web Font Feature Image

Before We Begin

In case you missed it in the title, this tutorial will be using Elegant Theme’s Divi. I’d recommend purchasing this theme before you begin.

Full disclosure, I am an affiliate with Divi. There will be links through this article (and many of my others :p) that will help you purchase the Divi Theme if that is what you’re interested in.

These links are what allow us to provide you with awesome tutorials every week, and when you make a purchase through them it really helps to support the website.

Ok, back to the tutorial 🙂

What are Web Fonts?

You’d never guess it from the name but web fonts are fonts that you can use on the web.

I know, crazy right?

Web fonts are font files that you can embed on your website to make the design feel more customized.

Everyone has access to system fonts like Times New Roman, Helvetica, and (heaven forbid) Comic Sans because these fonts come standard on most devices. This means that system fonts are much faster than web fonts. But it also means these system fonts have been used to death! And I’m sure you other designers will agree with me here, system fonts can be boring to work with.

That’s where web fonts come it! Any fonts that use WOFF2, TTP, and OTF file types can be uploaded to your web server and then called to in your CSS or in your theme. This means, as long as you have the correctly formatted file, you can now use any font you want on your website!

The internet is truly a wonderful place sometimes.

Where to Get Web Font Files?

Simply put, you can get web files with the proper licensing from the big three:

  1. Google Fonts
  2. Adobe Fonts
  3. Creative Market

The internet is an endless place so you can get web files from an endless list of places, but the above sites are three of the most common sites designers and developers use. Read more to learn the pros and cons of each.

Google Fonts

With over 1,000 typefaces to choose from and an insanely easy-to-use interface, Google Fonts is one of the most popular places to get web font files.

Don’t believe me? According to their fun analytics page, their fonts have been viewed over 59,550,000,000,000 times as of the writing on this article.

Oh, and did I mention it is completely free?

How to use Google Fonts

1. Simply select the font you’d like to use from Google’s extensive list.

Google fonts type face list

2. Click “+ Select this style” on all the font weights you’d like to use.

Google Fonts Select This font

3. Copy the @import statement in your CSS or your HTML head tag

Google Fonts Import Statement

4. Call the font-family outlined on the sidebar in your CSS where for the tags like syled with the selected font.

Font Family CSS Google Fonts

Unsure how to add this information to your CSS? Skip ahead to how to integrate web fonts with CSS.

Adobe Fonts

The creative giant wouldn’t be left out of this race! Similar to Google Fonts, Adobe has a huge library of web-optimized fonts that are ready to be added to your site with a simple copy and paste.

What makes Adobe even more special is their font packs page. You can get inspired and easily find a unique font perfect for your brand by browsing through their font packs.

Adobe Fonts, previously called Type Kit, inherently syncs with your Adobe Creative Cloud account so that the fonts can be used in all your Adobe apps. This way you can keep your brand consistent across all mediums. 

Unfortunately, with all these great features, this service is not free. You need to have a Creative Cloud license in order to access it. If you need a Creative Cloud license, support the site and get a license through our affiliate link.

How to use Adobe Fonts

1. Select the font you’d like to use on your website.

Adobe Fonts Screenshot

2. Click the “</>” symbol and create a new Web Project.

This is essentially a font folder Adobe creates and stores for you on their servers so you don’t have to.

Add font to web project

3. Copy the font-family CSS and read on to the CSS implementation portion of this post.

Copy Adobe CSS

Creative Market

While Google and Adobe have a long list of font options for you to choose from, I know my fellow designers. We like to challenge the status quo, change things up, and put things to what hasn’t been done before! Enter Creative Market.

Creative Cloud Fonts Ad

This website is a little different from our previous two web font directories. Creative Market is just like it sounds; it’s a marketplace full of creative tools, templates, and applications created by other designers! One of the MANY awesome things Creative Market sells is fonts.

This is a great way to support creatives directly so they can create cool stuff for you to use! And there are thousands of cool fonts waiting for you to try out, with more being added every day!

Creative Market Fonts Screenshot

Just watch out for licensing here. Make sure to get the we license (not e-pub, or desktop), so that you can legally use the font on your website. Creative Market’s got a great breakdown of their licensing here.

How to add a Creative Market web font to your website

Simply purchase the font you’d like to use, then upload it to Divi using the following instructions.

How to Add a web font using Divi

Ensure You Have the Correct File Format

Divi only accepts files that end with .otf or .ttf.

Don’t have the correct file format? Don’t worry, there are tons of free online converters that you can use. I like to use Cloud Convert.

Go to Text Module Fonts

Navigate to a text module on one of your pages. Then click on the Design tab > text drop-down.

Divi Text Module Screen Shot

Upload Font Button

Click on the font family drop-down and click on the upload font button in the listed options.

Divi Upload Files screanshot

Upload Files

Simply drag and drop your font files into the upload file area, give your font a name for Divi to display, and then click save.

Upload Font Files Divi

Congratulations! You did it!

How to add a web font using CSS

You’ll need two things to add a web font using CSS:

  1. An Import Statement
  2. A Font Family Property

The import statement tells your browser where the font files are located. Simple write @import URL(“your-cool-font-file-url.ttf”); in the upper area of your CSS file, but obviously replace the URL between the quotes with the URL to your awesome font.

[et_pb_dmb_code_snippet code=”QGltcG9ydCBVUkwoInlvdXItY29vbC1mb250LWZpbGUtdXJsLnR0ZiIpOw==” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_dmb_code_snippet]

The font-family property declares what font you’d like a specific element will use. Simply write the tag you’d like to change the font for, open and close two curly brackets, and then add a font-family statement with the name of your cool font.

[et_pb_dmb_code_snippet code=”cCB7CiAgZm9udC1mYW1pbHk6IHlvdS1jb29sLWZvbnQtZmlsZSwgc2Fucy1zZXJpZjsKfQ==” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_dmb_code_snippet]

Simply save your CSS file and enjoy your new awesome looking site!

Tory Barber Headshot Thumbnail

About Me

Hi I’m Tory!I’m a Graphic Designer, Web Developer, and AI OBSESSED artist from good ol’ Canada, eh!I record all the things I learn as I dive deeper into the Generative AI rabbit hole so I can teach people like you!

Follow Me

Prompt Inspo In Your Inbox!

Latest Articles

Latest Posts

Dall-e 3 Announcement Breakdown

Dall-e 3 Announcement Breakdown

OpenAI just announced that they will be releasing Dall-e 3 in the fall. Learn when you can get access and what Dall-e 3 improves on the latest model.