Want to Use Google Fonts with Matala

(@87soccerb)

I would like to alter the header.php and the css stylesheet as appropriate to change the font for the header text of my website http://www.thinkbuilddream.com

I am also trying to use the google fonts plugin by Adrian. However, it seems I have a few problems (btw, I’m not a super experienced php or css programmer by any means):

1.) the h1, h2 tags are not specified appropriately to correctly display what I tell my google fonts plugin to display (like specify a certain font for my “p” tags and specify another font for my “h1” tags. See below an excerpt from my css style sheet:

[ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

/* =Reset HTML
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before,
blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}
html {
	overflow-y: scroll;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

<strong>2.) I am not sure how to change the font-family script. Under the header file of my css style sheet I have this:</strong>

/* =Header
-------------------------------------------------------------- */

#branding {
	margin: 0 auto;
	position: relative;
	width: 960px;
}
#site-title,
#site-description {
	color: #fff;
	font-family: Georgia, serif;
	font-weight: normal;
}
#site-title {
	padding-top: 25px;
}
#site-title a {
	color: #fff;
	display: block;
	font-size: 64px;
	line-height: 62px;
	margin-bottom: 5px;
	text-shadow: -2px -2px 4px #000;
}
#site-description {
	display: block;
	font-size: 32px;
	line-height: 34px;
	margin: 0;
	text-shadow: -2px -2px 4px #000;
}

3.) Finally, I’m not sure where in my header.php file I am supposed to insert the google fonts plugin api code. The header.php script is as follows (as you can see I tried inserting the google fonts plugin api directory in there):

<?php
/**
 * @package WordPress
 * @subpackage Matala
 */
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) | !(IE 9)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
	<div id="wrapper">
		<header id="branding" role="banner">
			<hgroup>
				<h1 id="site-title"><span><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
			<nav id="access" role="navigation">
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
		</header> <!-- #branding -->
		<div id="inner-wrapper">
			<div id="main">

The topic ‘Want to Use Google Fonts with Matala’ is closed to new replies.

Tags