Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?
Question
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?
2 answers
solution1
1 ACCPTED 2015-03-23 23:11:00
在本地工作时，请使用http：//而不是无需协议的// //现在不会加载Google字体...
<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' />
solution2
0 2015-03-23 23:56:00
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.