Public forums/Tips & Tricks

Adding a new Google Font in Typography

Alex
posted this on August 7, 2013, 12:43

Adding a new Google font in Tripod:

1. Find your font in Google Fonts: http://i.imgur.com/b4ytmP5.png

2. Open \lib\php\includes.class.php file. Search for

static function get_latest_google_fonts()

3. Find where this function returns the array with all the fonts:

return $cosmoGoogleFonts;

4. Above the returning variable add your font:

$cosmoGoogleFonts['Roboto'] = 'http://fonts.googleapis.com/css?family=Roboto';

Roboto - is the font name, from step 1.
http://fonts.googleapis.com/css?family=Roboto - is the URL to the font, from step 1.

5. Save the edited file. Verify in Typografy if you have your added font: http://i.imgur.com/UqUr2ar.png

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

What selectors you may use in Custom CSS box to change all you're theme's fonts (let's say you added a Roboto Light Google font via @font-face property:

 

nav.main-menu ul li, #colophon .row .widget_zone h5 {
font-family: RobotoLight!important;
}

body, p, li {
font-family: RobotoLight!important;
}

h1, h2, h3, h4 {
font-family: RobotoLight!important;
}


nav.main-menu ul li a span.sf-sub-indicator {
font-family: arial;
}

#main .list-view .row ul li {
font-family: RobotoLight!important;
}

.widget h6 a {
font-family: RobotoLight!important;
}

.widget_zone p input {
font-family: RobotoLight!important;
}

.widget_zone p textarea {
font-family: RobotoLight!important;
}

nav.main-menu{
font-family: RobotoLight!important;
}

 

--------------------------------------------------------------------------------------------------

 

Adding the font-face property in CSS:

E.g. :

@font-face {
font-family: RobotoLight;
src: url('http://fonts.googleapis.com/css?family=Roboto:100&subset=latin,...);
}


h1, h2, h3, h4 {

font-family: RobotoLight!important; /*font-family: RobotoThin!important;*/

}

...PASTEBIN: http://pastebin.com/sJyFsCCZ

 

-----------------------------------------------------------------------------------------------------

 

Another method for adding a Google font:

You can try solve the problem by going to Google, find the font you want, and add the link in the header.php file: http://i.imgur.com/fef1jzh.png paste the link in header http://imm.io/1g8CZ and use it in content http://i.imgur.com/MT2dhRW.png

<h4 style="font-family: 'Gruppo', cursive!important;">

The result: http://i.imgur.com/uJvCBGE.png

Cheers!

 
Topic is closed for comments