How to Disable Bootstrap Font

On 1/13/2016

Hi! This quick bootstrap tutorial will teach you how to disable bootstrap font and apply your own styles. Customizing Bootstrap’s default theme is simple, but for a newbie it’s hard to find their way around. Once you know how to do it, you can customize the entire bootstrap theme easily.

Disable Bootstrap Font

The css for bootstrap framework can be found inside the css/bootstrap.css file. Bootstrap applies typography settings for the entire web page in the body {} selector.

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;

You can simply override these styles by attaching a custom stylesheet. For that create a stylesheet with name custom.css and save the below code to it.

body {
    font-family: Georgia;

Now load the custom style sheet after bootstrap css file and you are done!

<!DOCTYPE html>
<html lang="en">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Disable Bootstrap Font</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/custom.css" rel="stylesheet" type="text/css" />
        <h1>This is the Custom Font!</h1>
Before Disabling Font
After Disabling Default Font

Just like that you can easily disable bootstrap font. You can try changing other bootstrap styles too with this trick.

No comments:

Post a Comment

Contact Form


Email *

Message *