CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfontsgoogle-font-api
lucacerone
lucacerone

Reputation: 10119

Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

I am trying to customize a Bootstrap 3 based theme, but I am having difficulties in styling it using Google fonts.

I want to use the Lora font available in Google Fonts, and the head of my page contains:

<head>
    <meta charset="utf8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- check meaning of these 
    <meta name="description" content="">
    <meta name="author" content="Luca Cerone" >
    <link rel="icon" href="../../favicon.ico">
    -->
    <title>site title</title>

    <!--- add google fonts here -->
    <!--- Google  fonts Lora -->
    <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />

    <!--- This is Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">   

    <!--- personal styles should always be below bootstrap -->
    <link rel="stylesheet" href="css/style.css">

</head>

At the beginning of css/stlye.css I placed:

* {
    -webkit-border-sizing: border-box;
    -moz-border-sizing: border-box;
    -ms-border-sizing: border-box;
    border-sizing: border-box;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 17px;
}

and ideally I would like the Lora font to be used on all my pages.

However, when I try to load a page in a browser and check with chromium developers tools, the font family appears stricken-out and it seems to me that a serif font is used, but not Lora.

What am I doing wrong and how could I fix this?

Upvotes: 0

Views: 791

Answers (2)

AndrewL64
AndrewL64

Reputation: 16311

Try adding the font to the html and body tag instead like this:

html, body {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 17px;
}

And yes, keep the http: before the google font link.

And also, if your site uses SSL certificate (https://yourdomain.com) then use https: for all internal as well as external links on your site but if your site does not use any SSL certificate (http://yourdomain.com) then use http for all links in your site.

Upvotes: 0

Milkmannetje
Milkmannetje

Reputation: 1182

When working locally, use http:// instead of the protocol-less // The Google font's aren't loading now...

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />

Upvotes: 1

Related Questions