How to import and add custom fonts in your website (HTML + CSS)
Pranav Konjeti | Published : June 28th, 2023
Table of Contents
- Introduction: Custom Fonts?
- Where to find custom fonts
- Google Fonts
- Adobe Fonts
- Font squirrel
- Importing your custom fonts
- Importing through a HTML File
- Importing through a CSS File
- Adding Backup Fonts
- Conclusion/Recap
So you probably know how to use regular fonts in CSS, right? You know, the pre-installed ones that are available by default?
Well whether or not you know how to use the default CSS fonts, we’re just going to spend a little bit of time going over how to add them into our file before moving onto adding custom fonts.
Using the default CSS Fonts
Changing a font of an element is actually really simple with a bit of CSS. Take a look at the example below where we are changing the font of an element called myElement.
myElement {
font-family: 'Courier New', Courier, monospace;
}In the example above, we are replacing the default font of myElement with 'Courier New' and using 'Courier' and 'monospace' as back-up fonts incase our main font ('Courier New') didn’t load in properly for some reason.
In the example above, we are showing 3 of the pre-built fonts that CSS provides us, but there’s actually a ton of them pre-built! Below is a screenshot showing some of the many different pre-built fonts we have available in CSS. If you would like the full list, you can see them here.
But you probably clicked on this post to learn how to add your own custom fonts. What’s the point of me explaining how to add the pre-built fonts in CSS, which you probably know how to add already?
Well, the thing about the pre-built fonts in CSS is that they are web safe. Web-safe fonts, also known as system fonts or standard fonts, are fonts that are commonly available across different operating systems and web browsers. If you were to add a custom font to your website, there’s a chance that it may not load properly on other browsers/operating systems.
Later on in this post, we’ll learn how to fix that (it’s actually really easy!), but for now we’ll hop into adding custom fonts onto our site!
Google Fonts is by far the largest and most popular online library when it comes to choosing and using custom fonts on the web. With its extensive collection of over 1,000 font families, it offers an impressive range of typography options for your web projects.
Although Adobe Fonts is a paid resource, it still is reputable and a highly regarded resource for discovering and utilizing custom fonts in your web designs. It boasts an impressive collection of over 14,000 high-quality fonts from renowned foundries and independent designers. Adobe fonts also makes it easy to integrate with popular design applications like Adobe Creative Cloud making it also a viable option if you are willing to pay.
Font Squirrel is another popular website known for it’s vast library of over 2,000 custom fonts. All the fonts available on Font Squirrel are carefully curated, ensuring quality and compatibility.
As you may have noticed by now, there are a ton of different options to choose from. In this article, we are going to go over how to import fonts from Google Fonts. If you would like to use any of the other websites we mentioned, we recommend searching “how to import fonts from <website>”!
Let’s finally start what you probably came here for — importing custom fonts. Since we’re using Google Fonts for this, start by going to their website.
Once you’re there, take some time choosing a font you like. Google Fonts has a huge collection, so there’s bound to be a font or two that’ll stick out to you! Once you have found a font you like, click on it. For the purposes of this example, I’m going to be importing the font Inter, but the process will be the same regardless of whatever font you choose.
Once you have found a font you like and clicked on it, you’ll be met with a screen showing your font and it’s different styles like this:
Go ahead and scroll down to the “styles” section of the page. Once you get there, choose the style of the font you like and then press Select <style>.
Once you have selected your font, press the View Selected Families button at the top-right of the screen. If you can’t find it, look at the demonstration below:
Once you have clicked that button, a sidebar should open on the right side of your screen. In that sidebar should be a section titled Use on the web with two buttons.
So there’s actually two ways to go about adding fonts to our website. We can either link the font through the <head> of our HTML file OR we could import it into a CSS file with @import. We’re going to go over both ways. You can choose whatever you believe is more convenient.
Importing fonts through our HTML file
To add your font of choice through your HTML file, simple copy the code into the <head> of your HTML. Here’s a quick demonstration:
And then we just paste that into our HTML head like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add your code HERE!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
</body>
</html>Lines 6-8 of the above code snippet was our copied code. It’ll look slightly different based on your font, just make sure you’re importing it inside of the <head>!
And that should be it! Now we can go into any CSS file and just paste in our font using font-family like we mentioned before.
/* styles.css*/
/* Make sure that your CSS file is LINKED with your HTML file */
myElement {
font-family: '<Your Font Name>';
}Importing fonts in a CSS file
Importing fonts into a CSS file is also really simple!
The first thing we need to do is toggle the sidebar from <link> to @import like this:
Once we have our @import toggled on, just copy the coded by clicking the copy button at the bottom right of the widget like this:
Now we’re almost done! Lastly, paste the copied code into our CSS file and then we can start using our font! (Make sure to remove the <style> tags that are copied).
/* Your CSS File */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
/* Using your font: */
myElement {
font-family: '<Your Font Name>';
}Note:
- Imports should always be at the very top of your CSS file. They may not work if they are located elsewhere
- As stated before, make sure to remove the
<style>tags that were copied when you pressed the “copy” button.
And there you go! Enjoy using your font around your website. You can also add and import multiple fonts at the same time with the same process!
Not all web browsers and operating systems support every font you use. It’s good practice to add in backup fonts incase your original font doesn’t load properly. Luckily this is really easy. We just simply specify a second font to load incase the first doesn’t work.
In the below example, sans-serif is our backup font incase our original font Poppins doesn’t load properly
/* Add a backup font by specifying a second
font incase your first doesnt load */
myElement {
font-family: 'Poppins', sans-serif;
}And that’s really it for adding custom fonts into your web application! Once you have a custom font ready to go on your site, you’re able to style it however you want. This could mean changing the size, changing the color, change the weight, etc.
We hope that you were able to learn and gain something valuable from this post! If you find HTML and CSS interesting and want to learn more about how to build full-scale web applications with the help of JavaScript, don’t forget to check out learntheweb’s web-development courses. These courses were carefully curated by our team and contain the latest and up-to-date information to help you become a web development expert!
You can click here or click the button below to learn more about our courses and try them yourself. No sign-up or payment is required to start learning!