CODEWITHSUNDEEP
csstwitter-bootstrapfonts
Judson
Judson

Reputation: 2325

Twitter Bootstrap - Use serif fonts

I'm using Twitter Bootstrap for a site design and I would like all of the display fonts to use serif (rather than the default sans-serif) font faces. Is there some way to do this without having to recompile via LESS? I would really like to avoid learning LESS for something this basic.

Upvotes: 10

Views: 29217

Answers (4)

Neelansh Mathur
Neelansh Mathur

Reputation: 11

It depends on whether you use Bootstrap by CDN or you downloaded it. If you downloaded it, you must be having either boostrap.css or boostrap.min.css In those, You will find:

    /*some element*/{
        font-family: /*some font names*/
    }

Replace it with the font you want, it's that simple!

Upvotes: 1

Jay
Jay

Reputation: 1147

May I also recommend adding headers in there too...

    body,
    h1,h2,h3,h4,h5,h6,
    input,
    button,
    select,
    textarea,
    .navbar-search .search-query {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 2.2em;
    }

Upvotes: 1

Terry
Terry

Reputation: 14219

If you don't mind changing the bootstrap.css, do a find & replace on:

"Helvetica Neue", Helvetica, Arial, sans-serif;

replace with:

Georgia, "Times New Roman", Times, serif;

If you don't want to do that, add this code to your custom CSS to override Bootstrap's.

body,
input,
button,
select,
textarea,
.navbar-search .search-query {
  font-family: Georgia, "Times New Roman", Times, serif;
}

Upvotes: 18

Calvein
Calvein

Reputation: 2121

You have to change the LESS variable @baseFontFamily, it's default value is @sansFontFamily you juste have to set it to @serifFontFamily.
If you don't want to use LESS you can still change those variables in the Customize menu in the docs.

Upvotes: 10

Related Questions