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:
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.
2. Click “+ Select this style” on all the font weights you’d like to use.
3. Copy the @import statement in your CSS or your HTML head tag
4. Call the font-family outlined on the sidebar in your CSS where for the tags like syled with the selected font.
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.
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.
3. Copy the font-family CSS and read on to the CSS implementation portion of this post.
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.
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!
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.
Upload Font Button
Click on the font family drop-down and click on the upload font button in the listed options.
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.
Congratulations! You did it!
How to add a web font using CSS
You’ll need two things to add a web font using CSS:
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.
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.
Simply save your CSS file and enjoy your new awesome looking site!
