• Registered: 2017-08-23
  • Posts: 8

Topic: header font displaying differently in Juice Box Galleries [SOLVED]

Hi - my main site pages has a header across the top with all the page titles : https://www.johnlockeactor.com/portfolio_stills.html. The header styles are set in the main css.

But when I add the header code to the JuiceBox index it displays differently - a much more rounded font: https://www.johnlockeactor.com/gallery/ … olour.html

The code I've added to the Juicebox index does call the style sheet just as it does in the main pages:

<title>John Locke - [url=http://www.johnlockeactor.com]www.johnlockeactor.com[/url]</title>
<link href="../../CSS/mainStyles.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Expletus+Sans|Overlock+SC' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="wrapper">
  <div id="header">
    <div id="headerLeft">
      <p class="title">John Locke</p>
      <p class="subtitle">Actor</p>
    </div>
    <div id="headerRight"><ul>
    <li><a href="../../index.html">Home</a></li>
    <li><a href="../../resume.html">Resume</a></li>
    <li><a href="../../portfolio_stills.html" id="current">Stills</a></li>
    <li><a href="../../portfolio_video.html" id="current">Film & Video</a></li>
    <li><a href="../../contact.html">Contact</a></li>
    </ul></div>
  </div>
    <!--START JUICEBOX EMBED-->
  • Registered: 2012-04-24
  • Posts: 5,904

Re: header font displaying differently in Juice Box Galleries [SOLVED]

Your Juicebox gallery page is https:// but you are trying to load the font via http:// so it is likely being blocked and not being loaded.

<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Expletus+Sans|Overlock+SC' rel='stylesheet' type='text/css'>

In your other web page, you load the font using the following code, the leading double slash uses the same protocol (https:// vs http://) as the page itself:

<link href='//fonts.googleapis.com/css?family=Great+Vibes|Expletus+Sans|Overlock+SC' rel='stylesheet' type='text/css'>

Use the leading double slash notation in your Juicebox gallery page and this should hopefully resolve your problem.

  • Registered: 2017-08-23
  • Posts: 8

Re: header font displaying differently in Juice Box Galleries [SOLVED]

hi - that's it! thanks very much for your reply.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: header font displaying differently in Juice Box Galleries [SOLVED]

You're welcome!
I'm glad it worked. Thank you for letting me know.