You might know already that CSS and HTML provide you a few different family fonts, such as MS pgothic, Arial, Sans serif etc. But these are not all fonts out there.

What if you want a font thats not there? How do you install it to your website?

This is a guide on doing just that! :)


STEP ONE
Download your font. After you have it saved, upload it as a single file ( not as a ZIP or a folder ! ) to your hosting service.

STEP TWO
Put this in your css file or your stylesheet , and change values according to my notes ( make sure to remove the lines starting with /* and ending with */ ! ) :
@font-face {
font-family: NameYourFont!;
/* ♡₊˚ Change to whatever youd like to name your font・₊✧ */
src: url(Link.ToYourFont!);
/* ( ˊᵕˋ )♡. Link your font file , Make sure the link is valid . °*/
}

STEP THREE
Add font-family: [whatever name you chose] to any CSS element youd like! This can also be done in html by using style="font-family: [whatever name you chose]" on any tag.


And... Youre done! You now have a custom font on your website (˶ᵔ ᵕ ᵔ˶) ♡ Congratulations!

xo xo shai