Follow this guide to learn how to add a custom font to a website using Google Fonts!
Follow these steps to set up a new project.
class
attribute to the second <p>
element that says “Style this paragraph…”class
to be update
<style></style>
element.update
as the selector{
and }
)At this point, the added code should look something like this:
HTML
<p class="update">Style this paragraph...</p>
CSS
.update {
}
The project should be ready for styling.
The cool thing about Google Fonts is that it will provide all the code needed to add the custom font. The first step is to copy that code.
@import
First, copy the @import
code for a selected font.
<style></style>
tags (starting with @import
) and copy it<style></style>
element, and paste the code (starting with @import
)
{
and }
The code at the top of the <style></style>
element should end up looking something like this:
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap');
font-family
PropertyNow that the font has been imported, it will be possible to use it in the CSS!
font-family:
.update
ruleset, (between {
and }
), paste the code (starting with font-family
)That should be it! Try running the project and viewing the page. The <p>
element should be styled with the new font!
The code should end up looking something like this:
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap');
.update {
font-family: 'Ms Modi', cursive;
}