Solved

Call Google Web Fonts from CSS

Posted on 2011-02-22
12
841 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
Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

 
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

689 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