Where can I set heading font and content font variables in the theme code?

tom plucinski
asked 11 years ago

I would like to use webfonts installed on my server with the theme.
Instead of overriding all the CSS rules, I’d like to set the heading and content font variables that are accessible in the customize section.
Where in the theme code can I set these?
Thank you for your help.

Trivial Shock
replied 11 years ago

hi tom,
i hope that i can help you.
try to fill this in your custom css editor like jetpack or css hero. play a little bit with the settings and save it.
please use firebug or a other dev tool to check your css code from the site. this help you to understand and debug the code.

h1, h2, h3, h4, h5 {
font-size: 120% !important;
}
.page-title {
font-size: 120% !important;
margin: 20px 15px 10px;
} /* this is the page title selector */
.item .item-title {
font-size: 120% !important;
line-height: 1.5;
margin: 0;
}
.grid-double .item-title {
font-size: 120% !important;
} /* this is the double post selector */
.item .item-content {
font-size: 120% !important;
overflow: hidden;
} /* this is the content selector */
#sidebar .widget-title {
color: #212121;
font-size: 120% !important;
margin: 0 0 5px;
text-transform: none !important;
} /* this is the sidebar selector */
#sidebar a {
font-size: 120% !important;
}

tom plucinski
replied 11 years ago

thanks TS,

This is not what I’m looking for.
I have custom web fonts (not google) I would like to use with this theme.
I would like to either:

a) include my own fonts in the font customization menu

b) hard code my own font families into the variables that get set by the customize fonts drop down menus

looking for the place in the theme code to implement these modifications

3 Answers

Achim
answered 11 years ago

hi,
try is like this:
add this code in the css file:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Then, to use the font on a specific element:

.classname {
    font-family: 'YourFontName';
}<br />

hope this helps ..

DominicStaff
answered 11 years ago

Just want to follow up on your question, let us know if there is anything else we could help.
Regards,

tom plucinski
replied 11 years ago

Hello Dominic,

Yes, you can help by providing the name of the php file and the line number in that file, where I can set my own values for the heading font and body font variables.

I know about overriding the CSS rules with my own, but I want to be able to edit the fonts in one place in the php code of the theme.

If you can help me with that, it would be great.

Thanks in advance.

Wilfred
answered 11 years ago

Thanks for additional info !
You can customize the font by opening up the function.php file in /wp-content/themes/dw-focus/functions.php, from line 820 to line 852.
Hope this helps!