Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 859
  • Last Modified:

Call Google Web Fonts from CSS

Hello,
I found Google Web Fonts recently and tried to use them within my pages.
They work fine but I have to add a line on every page (have more than 1000).
Is it possible to add this line in CSS to let every page call the fonts?

Here's the line:
<link  href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >

Open in new window


Is it possible to add it into my unique css?

Thanks!!
0
fabianlujan
Asked:
fabianlujan
  • 7
  • 5
1 Solution
 
jeremyjared74Commented:
For multiple Google Fonts put this in the header befor the body tag:

<link href='http://http://fonts.googleapis.com/css?family=Syncopate:b|Raleway:i' rel='stylesheet' type='text/css' />>

Open in new window


0
 
jeremyjared74Commented:
One to may >, Here is the correct code:
<link href='http://http://fonts.googleapis.com/css?family=Syncopate:b|Raleway:i' rel='stylesheet' type='text/css' />

Open in new window


Then just use it in place of regular font names.
0
 
fabianlujanAuthor Commented:
sorry jeremy, what I want to do is avoid adding this line on every page (more than 1000).
I want it into the style.css (which is called from every page +1000)
That is, one page change affects +1000 and no +1000 changes ;)
Thanks!
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
jeremyjared74Commented:
I don't know what else to tell you. You will have to put it inside the html of the page somewhere to get it to work.

Do you not have a header template:? I guess I am too used to using PHP driven websites. 1 Header for all pages.

Just placing it inside of the css won't work.

See the article here from NetTuts:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-google-fonts-api-youre-going-to-love-this/
0
 
fabianlujanAuthor Commented:
Sorry Jeremy but I wasn't clear enough on this issue.

Can I reference it from the CSS file instead of HTML pages?
Maybe, there is a way to modify that line and make it fit for CSS syntax.

Thanks.

PS. I think that your last sentence is the final word "just placing it inside of the css won't work"
0
 
fabianlujanAuthor Commented:
Any idea??
0
 
jeremyjared74Commented:
You may be able to call it like this:
@font-face {
  font-family: 'Inconsolata';
  src: url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}

Open in new window

Then in your CSS you could use the Inconsolata font with any element. I don't know how you will find the google source URL for the other fonts without having them installed once so you can then view the source output.

If you will tell me the font that you want to use, I will send the CSS code like above, but with your font.
0
 
fabianlujanAuthor Commented:
Please Jeremy, show me how to use the code (url) I need.

Thanks!!
0
 
fabianlujanAuthor Commented:
Perfect! The example given was good enough to solve my issue.
Thanks!
0
 
fabianlujanAuthor Commented:
I got to mention that using the url in my code, I've replaced the Inconsolata example and it works.
Thanks Jeremy!!
0
 
jeremyjared74Commented:
You're Welcome.
0
 
fabianlujanAuthor Commented:
That's the code that finally worked for me:

@font-face {
  font-family: 'PT Sans';
  src: url('http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic');
}

Open in new window


I've left the rest of the Google code line and just took the url part.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now