Reputation: 621
I'm trying to add PT Sans into a newsletter, but for some reason it isn't loading I've copied almost all of the code, but it isn't working. I would be so grateful for anyone who can help.
Here is the CSS code:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
and the HTML code:
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
EDIT: Here's the rest of the CSS:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
#logo{width:810px}
#saveDateText{
position:relative;
top:30px;
left:80px;
font-size:50px;
color:rgb(228,242,214)
}
#october{
position:relative;
top:0px;
left:90px;
font-size:35px;
color:rgb(228,242,214)
}
#raftLogo{
position:relative;
top:-125px;
left:550px;
}
#saveTheDate {
background-color:rgb(123, 190, 48);
height:170px;
width:810px;
}
#honoring {
position:relative;
background-color:rgb(9, 65, 30);
width:810px;
top:-30px;
font-size:20px;
height:400px;
}
#honoringTextDiv {
position:relative;
width:740px;
left:70px;
top:50px
}
#infoText {
color:white;
font-size:25px;
}
#honoringText {
color:rgb(242, 183, 51);
}
#benifit{
color:white;
font-size:25px
}
#morgridge {
position:relative;
top:20px
}
#sponsorships {
position:relative;
left:20px;
top:-30px;
height:300px;
width:400px;
border-right-style:solid;
border-right-color:rgb(160, 202, 129);
border-right-width:1px;
}
#inventiveSponsorsDiv {
position:relative;
left:425px;
top:-155px
}
#dmns {
position:relative;
top:-40px;
}
#1stbank {
position:relative;
top:80px;
}
#inspirationalSponsors, #inventiveSponsors{
position:relative;
top:0px;
color:rgb(123,190,48);
font-size:18px;
}
#inventiveSponsors {
top:-20px;
}
#names, #names2 {
line-height:25px;
font-size:14px
}
#names2 {
position:relative;
top:-94px;
left:160px;
text-align:left;
}
Upvotes: 4
Views: 37573
Reputation: 1
I had this issue today. And the metter if you made your test in with a httpsurl you need to change the link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"
by href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"
.
Otherwise, there is a conflict issue.
I hope that will hope someone.
Upvotes: -1
Reputation: 953
Check whether your css file is loaded after vendor stylesheets. For example, bootstrap.css should be before your css file.
Upvotes: 0
Reputation: 362
I had the same problem and if using the CSS tag of:
"font: 3em bold;" ---this overrides the google api call and loads your next default font.
SOLUTION: Use font-style and font-size
Upvotes: 1
Reputation: 333
Try to use URL without "http":
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
Upvotes: 14
Reputation: 65
Ask yourself this:
1. Are you developing online or offline (if online check number 2)
2. Make sure your browser does not have a shield icon because this
means the browser is blocking the font and you need to click
the allow button.
3. Check for spelling errors or anything suspicious.
4. Finally @import is the safest way I think.
Upvotes: 3
Reputation:
Few tips:
1. Use the HTML code in the beginning of your <head>
, before anything else. Example:
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
/* Rest of the code after this */
</head>
2. If that doesn't work, put this in your CSS file instead:
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
Upvotes: 5