4

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;
}
dunnmifflsys
  • 613
  • 2
  • 9
  • 21
  • Are you sure you don't have another style overriding it? That should work fine. – Chad Jul 17 '13 at 23:33
  • What browser are you using? Does it support embedded fonts? Are you loading the `PT Sans` style first, then trying to use the font later? – Oliver Spryn Jul 17 '13 at 23:33
  • Could we see the rest of the CSS and HTML in case some other style **is** overriding it, like Torr3nt said. – cbr Jul 17 '13 at 23:35
  • I'm using Google Chrome. The link to my CSS comes after the Google Fonts CSS. – dunnmifflsys Jul 17 '13 at 23:36
  • as every other Person i had the same issue and sadly none of these comments helped me. But i think i found a way how to fix it... you can open the URL Link for example:@import url('**https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap**'); and their you got some css which you can copy and paste into your stylesheet. Its not that nice to use this way but it works so... i hope i could help somebody :) – Sakon Dec 16 '22 at 23:13

6 Answers6

14

Try to use URL without "http":

<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
NatalyaKst
  • 315
  • 3
  • 6
  • 1
    @BartFriederichs omitting the protocol will cause the link to use the same protocol as the current page URL. The link will resolve to https://fonts.googleapis.com when used on an https URL and http://fonts.googleapis.com when used on an http URL. – Chris Parton Nov 12 '18 at 01:33
  • @ChrisParton and note that your browser might not load off-site HTTP resources on an HTTPS site. – Bart Friederichs Nov 14 '18 at 09:32
4

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);

  • Your CSS shouldn't be overriding it, based on your edit. You should try using one of the solutions in the answer. –  Jul 17 '13 at 23:40
  • Sadly, neither of these work. Still, I can't thank you enough for trying to help. This is making me very angry. – dunnmifflsys Jul 17 '13 at 23:42
3

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.
el_coder
  • 65
  • 9
1

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

James Brett
  • 332
  • 4
  • 15
0

Check whether your css file is loaded after vendor stylesheets. For example, bootstrap.css should be before your css file.

Dr.X
  • 853
  • 9
  • 15
-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.

NIMISHAN
  • 1,265
  • 4
  • 20
  • 29
Saino
  • 1