[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Call Google Web Fonts from CSS

Posted on 2011-02-22
12
Medium Priority
?
854 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month19 days, 7 hours left to enroll

834 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