How to Disable Bootstrap Font

Posted by Valli On 11/27/2017

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.

If you don't want to change the theme by yourself, then go and look around for good bootstrap skins. There are some free bootstrap skins available over the Net and you can use one of them on your project.

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">
<html>
    <head>
        <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" />
    </head>
    <body>
        ...
        
        <h1>This is the Custom Font!</h1>
        ...
        
    </body>
</html>