Need to Change H1-H3 Font in Metro Pro

[jgentry]

I’m trying to change the font for my titles (H1,H2,H3) areas, but I don’t have the font listed in the code where I expected it:

/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
font-weight: 400;
line-height: 1.2;
margin: 0 0 16px;
margin: 0 0 1.6rem;
padding: 0;
}

What should I do?

http://bloggerhacks.com

[Toon61]

JGentry,

The fonts are imported from Google Fonts. You probably have an entry in your CSS saying something like:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
This means that all fonts are 'Open Sans'.
If you want to change that, you can do a lot of things.
One of those things is going to edit the entry for 'body' in the top of your CSS, where the fonts are declared.
Change this line:

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
	color: #222;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
 

to

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
	color: #222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

Now you have ruled out the Open Sans font, and substituted it for Arial or Helvetica.
You could also include some special fonts by adding some '@font-face' declarations at the top of your CSS, like this:

@font-face {
    font-family: 'My-Font';
    src: url('fonts/My-Font.eot');
    src: url('fonts/My-Font.eot?#iefix') format('embedded-opentype'),
         url('fonts/My-Font.woff') format('woff'),
         url('fonts/My-Font.svg#My-Font') format('svg');
    font-weight: normal;
    font-style: normal;
}

Of course, 'My-Font' must be the name of the font you will be using. You can find a lot of open-source webfonts on FontSquirrel, or you could change the default Open Sans GoogleFont, by looking at all the available Google Fonts
If you only want to change the H1-H2-H3 fonts, you could add the following line to your CSS:

H1, H2, H3 {
font-family: 'My-Font';
}

I hope this answers your question.

[jgentry]

The last piece of code is exactly what I needed.

Thank you sir!

[Author]

Posts