Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Call Google Web Fonts from CSS

Posted on 2011-02-22
12
Medium Priority
?
852 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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

618 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