5 Replies - 647 Views - Last Post: 13 February 2014 - 02:00 PM

#1 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Webfonts - @import, font-family declaration issue

Posted 13 February 2014 - 12:07 PM

Hello DreamInCoders,

Hope someone can help me sort this one out.

I'm using Google webfonts - two font families

  • Fontdinier Swanky - normal
  • Open Sans - normal, normal italic, bold, bold italic


The problem
Using the code below, all text with the Fontdiner Swanky font displays correctly. All text with Open Sans font does not display with Open Sans. Instead the text displays using a browser default font not listed in the font-family declarations. Can you spot my error?

<!-- Here's the code from my index.php page -->

<head>
@import url(http://fonts.googleapis.com/css?family=Fontdiner+Swanky|Open+Sans:400italic,700italic,700,400);
</head>

<body>
    <div id="welcomeBox" class="clear bottomMargin">
      <h2>Welcome!</h2>
      <p>Lil' Daddy's totally Rothrageous product line came from the inspiration from working with his Dad and living the Hot Rod and Custom lifestyle to the fullest imaginable. He took his father's influence and carried it into his own products with a feel for the past, present and future - all rolled into one! Lil' Daddy and his crew forge forward with new and exciting products to make your car, hotrod, boat, guitar and just about anything else explode in color! Check it out now!!!</p> 
    </div>
</body>


<!-- Here's the styling from my main.css page -->

body 
{
	font-family: 'Fontdiner Swanky', cursive;
	font-family: 'Open Sans', Arial,  sans-serif;
}
#welcomeBox h2 {
	font-family: Fontdiner Swanky;
	text-align: center;	
}
#welcomeBox p {
	font-family: Open Sans;
	font-weight: 400;
	font-size: 1.3em;
	text-align: justify;
}



Many Thanks in Advance,
Mick

Is This A Good Question/Topic? 0
  • +

Replies To: Webfonts - @import, font-family declaration issue

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Webfonts - @import, font-family declaration issue

Posted 13 February 2014 - 12:40 PM

What happens if you remove the FontDiner version?

I haven't investigated but I will guess that your import statement will import this font OR (|) the Open Sans one if the first fails.

If you want both then it probably requires two separate imports.

ADDED: Actually, this doesn't appear to be the case and the pipe | should request both:

http://googlewebfont...e-font-api.html

Nevertheless, I would try to import the second font on its own to help narrow down the problem. i would also try swapping them around in the import statement.

This post has been edited by andrewsw: 13 February 2014 - 12:53 PM

Was This Post Helpful? 0
  • +
  • -

#3 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Webfonts - @import, font-family declaration issue

Posted 13 February 2014 - 01:34 PM

Thanks for your reply.

I tried all your suggested combinations and nothing changed. Then I remembered I have Fontdiner Swanky installed on my system, so I uninstalled it. The results are, now all my text is defaulting to the browser font. This tells me the @import function simply isn't grabbing the webfonts from the google server.

I followed the instructions as precisely as I could at the google site. There is nothing to sign up for. It's just a simple matter of copy/paste the code from google into my pages. Although I could host the fonts myself, I'd like to solve this mystery.

Any other ideas? Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Webfonts - @import, font-family declaration issue

Posted 13 February 2014 - 01:48 PM

Erm, yeah, your import statement isn't within a stylesheet :) or style-tags.

This post has been edited by andrewsw: 13 February 2014 - 01:50 PM

Was This Post Helpful? 1
  • +
  • -

#5 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Webfonts - @import, font-family declaration issue

Posted 13 February 2014 - 01:59 PM

So... the import statement needs to be at the top of my css style sheet, not inserted as the topmost statement under <head> on my index page, as I was told?

Will do. Stand by!

:rolleyes2:

BINGO!

Thanks bro.

:^:
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Webfonts - @import, font-family declaration issue

Posted 13 February 2014 - 02:00 PM

No worries
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1