HOW TO: Google Fonts

24 Nov 2010, 20:23

#1

Zen Follower

Join Date:: Aug 2008
Posts:: 162
Plugin Contributions:: 0

HOW TO: Google Fonts

Hi there,

I'm very excited about the possibilities with Google fonts. I know that I need to use web-ready fonts (so that all persons can view them whether they're installed on their computers or not) but now I believe that Google fonts will provide unlimited possibilities.

I've read the info here
http://code.google.com/apis/webfonts/docs/getting_started.html

My question is about Step 1:
Add a stylesheet link to request the desired web font(s):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Where and how do I add a stylesheet link? I know how to work with the stylesheet but unfamiliar about a link.

Much much appreciated. lynn
http://marketcafe-online.com

24 Nov 2010, 20:30

#2

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: HOW TO: Google Fonts

Create a custom copy for your template of the /template_default/common/html_header.php file

Insert the link appropriately in that file

24 Nov 2010, 20:47

#3

pet_herbal_remedies

Zen Follower

Join Date:: Aug 2008
Posts:: 162
Plugin Contributions:: 0

Re: HOW TO: Google Fonts

Thank you Kobra for such a fast response. My apologies for being a bit deft but how do I create a custom copy of my template? And where do I insert the link? much much appreciated, Lynn

24 Nov 2010, 21:10

#4

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: HOW TO: Google Fonts

how do I create a custom copy of my template?

FOR your template not OF

If the link in your sig is your site then the copy is uploaded to
includes/templates/all_business/common/

And where do I insert the link?

About here

/**
 * load printer-friendly stylesheets -- named like "print*.css", alphabetically
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
  sort($directory_array);
  while(list ($key, $value) = each($directory_array)) {
    echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
  }
Try HERE
/**
 * load all site-wide jscript_*.js files from includes/templates/YOURTEMPLATE/jscript, alphabetically

24 Nov 2010, 21:16

#5

pet_herbal_remedies

Zen Follower

Join Date:: Aug 2008
Posts:: 162
Plugin Contributions:: 0

Re: HOW TO: Google Fonts

I'm embarrassed to ask this but the copy of what? For example should I create a file with this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>

And then upload to includes/templates/all_business/common/? And then make the changes in Step #2 (I think I got that part). So sorry I'm not a developer...:blush:

24 Nov 2010, 21:22

#6

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: HOW TO: Google Fonts

No, just add the code like this

echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">';

in the location kobra showed in your custom copied file /includes/templates/all_business/common/html_header.php.

24 Nov 2010, 21:37

#7

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: HOW TO: Google Fonts

Thanks gjh42!!:cheers:

25 Nov 2010, 00:02

#8

ajeh

Oba-san

Join Date:: Sep 2003
Posts:: 62,757
Plugin Contributions:: 1

Re: HOW TO: Google Fonts

Is it just me or are those Google fonts kinda ... sorta ... maybe ... er ... ugly ... :blink:

25 Nov 2010, 01:28

#9

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: HOW TO: Google Fonts

Less ugly, I think, than not necessary. Customers on your site care about pricing, selection and ease of navigation.

Fonts, Google or otherwise, are, IMO, meaningless.

28 Feb 2011, 17:04

#10

jewelsnpearls

New Zenner

Join Date:: Feb 2011
Posts:: 29
Plugin Contributions:: 1

Re: HOW TO: Google Fonts

Meaningless... I would not say so. It gives you a chance to stand out from the crowd. And Googlefonts are not the Alpha and Omega of typefaces for web.

Typeface designs are made for a special purpose. For example to improve readability. OR to create a certain atmosphere - appealing to the buyer (consciously or subconsicously)

Verdana and Tahoma are just two of the gazillions of fonts randomly chosen by who? And we're all bound to it forever?

Why would we need templates then. Same thing: if it were only the product and the price that interests the buyer, we wouldn't need templates, then every shop could just look the same.

28 Mar 2014, 21:30

#11

refinerztouch

New Zenner

Join Date:: Mar 2014
Posts:: 10
Plugin Contributions:: 0

Re: HOW TO: Google Fonts

@jewelsnpearls , I agree with you!! the fonts really gives an awesome look to the site. I tried to follow the top threads but that did not work. Any suggestions, please welcome!!!

29 Mar 2014, 00:19

#12

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: HOW TO: Google Fonts

Exactly what did you do that did not work? Post an example of your modified file, and describe what else you did.

10 Sep 2015, 20:55

#13

marta_van_eck

New Zenner

Join Date:: Jan 2014
Posts:: 25
Plugin Contributions:: 0

Re: HOW TO: Google Fonts

I follow all instruction from this thread and it works fantastic :) Thank you. Also this site from google is very useful. (https://developers.google.com/fonts/docs/getting_started?csw=1)