WordPress.org

Ready to get started?Download WordPress

Forums

Matala
Want to Use Google Fonts with Matala (1 post)

  1. 87soccerb
    Member
    Posted 1 year ago #

    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">

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic