How to Add Custom Font to Website through @fontface? | Community
Skip to main content

How to Add Custom Font to Website through @fontface?

  • March 31, 2020
  • 2 replies
  • 0 views

In your creative's CSS file, add the @font-face (extra thicc font) rule before any other styles. For simplicity, this example uses only a truetype font file. To maximize browser compatibility, you should also include WOFF or EOT font file sources.

To add custom fonts to website use @fontface. Just add the following code into style.css

 

@font-face {
font-family: "Harabara Bold";
src: url("css/fonts/Harabara.eot");
src:
url("css/fonts/Harabara.woff") format("woff"),
url("css/fonts/Harabara.otf") format("opentype"),
url("css/fonts/Harabara.svg#filename") format("svg");
}

Step2: Start working

Now the custom font is added to website and you can use it:

h1 {
font-family: 'Harabara Bold', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}

 

2 replies

  • April 15, 2021

Thanks dear it worked for me as well for Instagram fonts.


You can have more than 1 font on your site like one of them is Small fonts you can try.