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&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?
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&subset=latin%2Clatin-ext' type='text/css' media='all' />