Solved

Call Google Web Fonts from CSS

Posted on 2011-02-22
12
823 Views
Last Modified: 2012-05-11
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
Comment
Question by:fabianlujan
  • 7
  • 5
12 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34955938
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
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34955959
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
 

Author Comment

by:fabianlujan
ID: 34955968
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34956473
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
 

Author Comment

by:fabianlujan
ID: 34960125
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
 

Author Comment

by:fabianlujan
ID: 35020892
Any idea??
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 250 total points
ID: 35021752
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
 

Author Comment

by:fabianlujan
ID: 35022000
Please Jeremy, show me how to use the code (url) I need.

Thanks!!
0
 

Author Closing Comment

by:fabianlujan
ID: 35082145
Perfect! The example given was good enough to solve my issue.
Thanks!
0
 

Author Comment

by:fabianlujan
ID: 35082149
I got to mention that using the url in my code, I've replaced the Inconsolata example and it works.
Thanks Jeremy!!
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35083318
You're Welcome.
0
 

Author Comment

by:fabianlujan
ID: 35083681
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
two div layout one vertical other horizontal. 5 27
push logos in footer up higher 5 20
Input box width 6 26
Best way to minify CSS with out breaking it 7 36
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question