Forums

FONT Question

Permalink
Hi, I am COMPLETELY new to C5 and creating a website. I really want to have the ability to use different fonts than what is available as default. I've searched the forums and have learned a bit about Cufon and Google font. I'm still a bit lost. Any advice would be appreciated but my question is: in google font, when they provide the code for a particular font, one is supposed to "copy the code as first element in the <head> of html document" -- how do I do this? -- where is it? I'm such a newbieeeeee!!!
Thank you in advance.
 
tallacman replied on at Permalink Reply
tallacman
This might help you:http://performancec5.com/how-to/...

Basically you put the call to the google code in your header.php file like this:

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Site Header Content //-->
   <link rel="stylesheet" href="<?php echo $this->getThemePath()?>/reset.css" />
   <link rel="stylesheet" href="<?php echo $this->getThemePath()?>/styles.css" />
   <link rel="stylesheet" href="<?php echo $this->getThemePath()?>/manual-edit.css" />
   <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<!-- this loads the google custom fonts. You can delete this code if you are using something else -->
   <link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic' rel='stylesheet' type='text/css' />
   <link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />
<!-- ens of google custom font calls -->
<?php  Loader::element('header_required'); ?>
Viewing 15 lines of 16 lines. View entire code block.


And then just call that font as the font face in the body tag.

html body {
   font: 15px "Droid Serif", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


Steve
ThemeGuru replied on at Permalink Reply
ThemeGuru
I would personally look at cufon font replacement.
jordanlev replied on at Permalink Reply
jordanlev
Hi ThemeGuru,
What are your reasons for preferring CUFON over google fonts (or any of the other ones like TypeKit or FontSquirrel)? I'm always curious as to when I should pick one over the other, as they both seem to have benefits and drawbacks.

Thanks!

-Jordan
ThemeGuru replied on at Permalink Reply
ThemeGuru
Its just what I like. @font-face is great but I dont like messy around with it when I'm dealing with clients.

This may help:

http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-fo...
akd replied on at Permalink Reply
Thank you so much for the info (especially the link about cufon -- amazing!). I'm still confused about where exactly to enter the code. Where do I find the header.php file (or where do I put any css code)? I feel like I've searched high and low and can't seem to find it.

.....I'm waaaay new to all this but I am learning!!

thanks again
Alicia
jordanlev replied on at Permalink Best Answer Reply
jordanlev
I suggest you learn how to create a theme WITHOUT worrying about this font issue first. Once you have a better understanding of things, it will be much easier to see where to put in the font code.

When you get to that point, this is what you'll want to do: add it to wherever the html <head> of your page type templates are. For most themes, this is generally in a file called "header.php" which is inside a folder called "elements", which is itself inside your theme's folder. Where is your theme's folder? Well if you downloaded a theme from the marketplace, it's inside your site's "packages" folder. If you built the theme yourself, though, it's inside your site's "themes" folder. Note that I'm talking about the actual filesystem (that you would FTP into on your server), not in the dashboard or in the sitemap.

Hope this helps.
ThemeGuru replied on at Permalink Reply
ThemeGuru
Well creating a theme isnt to hard.

Maybe the best way is to create the html version first make sure the cufon fonts are working and then port it over to c5.

If you need some help just PM me.

I plan on releasing a detailed document later on when I get some spare time from school.
akd replied on at Permalink Reply
Thank you for the detailed reply jordanlev. That is exactly what I needed to know.

Looking forward to the release of your document ThemeGuru :)

thanks again
alicia
jordanlev replied on at Permalink Reply
jordanlev
You're welcome :)
tomphillips replied on at Permalink Reply
Hey there jordanlev,

What about using custom fonts with existing themes? I really like the look of some of the paid themes here and my time is a bit short at the moment for building my own - do you know if the Clearview theme features Typekit support? Is it possible to demo paid themes with custom fonts in case the look changes really dramatically?
jordanlev replied on at Permalink Reply
jordanlev
You would have to ask the author of the theme -- click the "pre-sale questions" link in the sidebar of the theme's marketplace page.
SpencerC replied on at Permalink Reply
SpencerC
Hi,

I found the code from your site to be very helpful. It worked and gives me more refined typography customization. Thanks!

Now, wondering how to customize <h1>, <h2> and <h3>. Can I put the Google code into the php file and call it up in my CSS?

Thanks
Spencer

My (Earthtones Tony's) CSS:
body { 
   /* customize_body */  /* customize_body */
   /* customize_body */ color: #ccc; /* customize_body */
   line-height:21px;
   background:#353535 url(./images/main_bg.jpg) repeat-x top; 
}
img {border: 0px}
a,a:visited,a:active {
   /* customize_link */ color: #70b573; /* customize_link */
   text-decoration:none; cursor:pointer; 
}
a:hover {
   /* customize_link_hover */ color: #68dc6d; /* customize_link_hover */ text-decoration:underline;
} 
h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px; font-family: Georgia,"Times New Roman",Times,serif; font-weight:normal; color:#eee }
Viewing 15 lines of 21 lines. View entire code block.


My (Earthtones Tony's) PHP:

<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('minimalist_base.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('minimalist_styles.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: 'Questrial', sans-serif;
  font-size: 11.5pt;
  font-style: normal;
  font-weight: 300;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
Viewing 15 lines of 22 lines. View entire code block.
SpencerC replied on at Permalink Reply
SpencerC
Hi,

I found the code from your site to be very helpful. It worked and gives me more refined typography customization. Thanks!

Now, wondering how to customize <h1>, <h2> and <h3>. Can I put the Google code into the php file and call it up in my CSS?

Thanks
Spencer

My (Earthtones Tony's) CSS:
body { 
   /* customize_body */  /* customize_body */
   /* customize_body */ color: #ccc; /* customize_body */
   line-height:21px;
   background:#353535 url(./images/main_bg.jpg) repeat-x top; 
}
img {border: 0px}
a,a:visited,a:active {
   /* customize_link */ color: #70b573; /* customize_link */
   text-decoration:none; cursor:pointer; 
}
a:hover {
   /* customize_link_hover */ color: #68dc6d; /* customize_link_hover */ text-decoration:underline;
} 
h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px; font-family: Georgia,"Times New Roman",Times,serif; font-weight:normal; color:#eee }
Viewing 15 lines of 21 lines. View entire code block.


My (Earthtones Tony's) PHP:

<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('minimalist_base.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('minimalist_styles.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: 'Questrial', sans-serif;
  font-size: 11.5pt;
  font-style: normal;
  font-weight: 300;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
Viewing 15 lines of 22 lines. View entire code block.
Steevb replied on at Permalink Reply
Steevb
Hi,

Do you mean this:

h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px; font-family: 'Questrial', sans-serif; font-weight:normal; color:#eee }


This will alter the header tags to the 'Questrial' font.

OK?
SpencerC replied on at Permalink Reply
SpencerC
Partly. This helped. I added the additional font I wanted (via the Google Font code) to header.php, then made the changes to the <h>eaders as you suggest. Worked!

Thanks
Spencer