• Post category:CSS

Easy Way to Add Custom Bootstrap Font-family

Bootstrap Font-family

In this article, we will see about how to set the font-family using bootstrap. There is no in-built classes for font-family, so, we need to add the custom fonts in bootstrap classes using google fonts.  The font is very important to attract the users, so we put the attractive fonts. The default font is san-sarif.  Let’s see with examples:

Step by step guide to create custom fonts.

  1.  Go to google fonts and select your desired font.
  2.  Then Copy the <link> code and paste it in your <head>.bootstrap font-family
  3. Create the HTML element where you want to change the font. Then set the classname to that element.
  4. Select the classname using CSS class selector and paste the CSS “font-family” code from your selected fonts.
  5. Your bootstrap custom fonts is ready. Now, you can use that classname to any HTML elements like <p>, <span>,etc.

HTML:

<h1 class="h1font">Tony is a sucker!!</h1>
<p class="h1font">Hello Everyone!!</p>

CSS:

.h1font{
      font-family: 'Edu NSW ACT Foundation', cursive;
   }

Output:

bootstrap font-family

In the above code, we have created <h1> and <p> tag with classname “h1font”. Then select “h1font” and applying google fonts to CSS font-family property. See, the above output both <p> and <h1> texts are displaying fonts.

I hope you have understood a little about the create custom font family in this article. If you have any doubts about this then please comment below.

Leave a Reply