How to add additional Google Fonts Weight/Style ?

Hello,

What is the best way to add additional font weight/style under “Custom Typography” ?

I would like to use Roboto 400,100,300 but there is no option for me to select other weight just Normal and Bold.

Thank you in advance for your help.

Interested in this also. Open Sans italic is not happening. Thanks!

Jeff

Best way is to remove the font calls to Google from the functions.php file, then manually put the calls to Google CSS at bottom of your styles.css file. Kind of advanced, but I covered how to do this in detail in the Newspaper theme forum.

That doesn’t seem optimum to me. Doable but not optimum. Nonetheless, thanks! I did read that post and presume I’d need to use the child theme. I’m still in the early stages of building this so I’ll worry more about it at a later refinement stage.

Actually … I think this is setup differently from Newspaper; in doing quick looksee, in the /includes/wp_booster/

I think one would *actually* edit the td_fonts.php

look at line 902

if(!in_array('g_438', $td_user_fonts_list)) {//'g_438', //Open Sans
wp_enqueue_style('google-font-opensans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on menus/small text

I think you would need to edit that to add in both the italic and the 200 font.

Wait for Lucian or Marius with official help, though. This was just me doing quick look-see. (I have not yet actually done this with NEWSMAG…!)

• This reply was modified 11 years by simchris.

Alright, I’ll wait for them and thanks for chiming in. I did get the email with your original edit stating you don’t use the child theme but edit the theme files directly. When updates come through you do what?

Jeff

Normally we convert ALL fonts to Open Sans (with Newspaper, anyway); so typically we would open the style.css, search/replace all fonts to what we want, then edit the functions.php … but now would edit the td_fonts.php to REMOVE all the google fonts not being used; this ensures they don’t “print” in the head/foot of the posts online.

I have not yet done this for the fonts.

For our sites we have to do the following each update
1) update the hook for the post views to “views” from existing field
2) edit the search file to remove breadcrumbs (I don’t need those on indexes for each story)
3) edit functions.php to put various elements for us at bottom, such as changing default compression for images/thumbs, adding note to poke hackers trying the lost password function, turn off XMLRPC elements in header, remove Yoast from menu bar in admin, hide header elements like versions, hide use of visual composer, etc. — many common “optimizations” for WordPress sites.
4) edit header to remove the section for video thumbnails and this stupid thing
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
5) optimize the fonts, by doing the aforementioned house cleaning on style css file, and removing the extra google font calls.

Your mileage may vary 🙂

• This reply was modified 11 years by simchris.
• This reply was modified 11 years by simchris.

My custom functions.php mods, for those who care about such and sundry…. use at your own risk.

/*CHRISTOPHER'S CUSTOM MODS - 10.4.14. rev2 */

 remove_action( 'wp_head', 'wp_generator' ) ;
 remove_action( 'wp_head', 'wlwmanifest_link' ) ;
 remove_action( 'wp_head', 'rsd_link' ) ;
 remove_action( 'wp_head', 'feed_links', 2 );
 remove_action( 'wp_head', 'feed_links_extra', 3 );

 add_filter( 'pre_comment_content', 'wp_specialchars' );

 function no_errors_please(){
   return 'GET OFF MY LAWN !! RIGHT NOW !!';
 }
 add_filter( 'login_errors', 'no_errors_please' );

 /* Disable YOAST SEO Admin Bar. */
 function mytheme_admin_bar_render() {
 	global $wp_admin_bar;
 	$wp_admin_bar->remove_menu('wpseo-menu');
 }
 // and we hook our function via
 add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

 function delete_enclosure(){
  return '';
  }
  add_filter( 'get_enclosed', 'delete_enclosure' );
  add_filter( 'rss_enclosure', 'delete_enclosure' );
  add_filter( 'atom_enclosure', 'delete_enclosure' );

 function remove_cssjs_ver( $src ) {
     if( strpos( $src, '?ver=' ) )
         $src = remove_query_arg( 'ver', $src );
     return $src;
 }
 add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
 add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

 add_filter( 'jpeg_quality', create_function( '', 'return 50;' ) );

 function remove_pingback_url( $output, $show ) {
     if ( $show == 'pingback_url' ) $output = '';
     return $output;
 }
 add_filter( 'bloginfo_url', 'remove_pingback_url', 10, 2 );

 add_action('init', 'myoverride', 100);
 function myoverride() {
     remove_action('wp_head', array(visual_composer(), 'addMetaData'));
}

• This reply was modified 11 years by simchris.

Well… thanks… but I really want something simpler than that and don’t want to have to go through gyrations every time we update… but I appreciate your sharing. For the moment, I just want to get true italics and maybe some weights… it ought not to be that difficult… hoping anyway.

Well, if the “calls” to the italics and other weights are not found in the td_fonts.php, then they can’t magically be added any other way since any other method would simply add another call to Google fonts, when it should be part of the string from td_fonts.php; and the font calls are also optimized by the td-booster system, so best to keep it in one place.

I don’t see any way around NOT editing the td_fonts.php file, so far.

Also note the stuff on my functions.php file hacks – have nothing to do with the fonts. Was just sharing that while on topic of functions.php. Those edits are partially to improve google pagespeed insights.

But wait for Lucian or Marius. 🙂

As a comment, Open Sans true italic should likely be added by default as the “oblique” (slanted normal font) version kind of sucks.

@Christopher Thanks for the shares but I’ve got a bit lost. Just make change in the td_fonts.php as you suggested ?

Let’s wait to see the best and future proof way to implements additional font style for NewsMag

Editing the td_fonts would not future proof it, unfortunately.

When I get a free brain cell I’ll post the modification since I need to do that anyway. 🙂 I’m sure “real support” will have an answer sooner, though !

Still waiting for that “real support”… Just want to be able to add “real” italics and possibly other weights…

Anyone?

Okay… as promised, here is some help for this based on what I’ve done in past for Newspaper, translated for what works with this theme. It may be that the italics are not loading properly due to the enqueue method; dunno. I posted this in your other thread, but will also post here for completeness.

(admin – correct me if wrong on any of this !)

Note that in the td_fonts.php file it does appear italic is specified to be loaded from line 889 (this whole block was found in functions.php in Newspaper theme for those who are moving over).

e.g.,

wp_enqueue_style('google-font-rest', td_global::$http_or_https . '://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|Ubuntu:400,400italic|Open+Sans:400italic,400|Oswald:400,700|Roboto+Condensed:400italic,700italic,400,700'); //used on menus/small text

That “should” be loading the “normal” body font (400 weight) in both normal and true italic (vs oblique/slanted non-italic font).

Check your page source for a post to see if that is actually there.

Similarly at line 902 this is found; presumably this would be enabled and enqueued if selected from the theme fonts selectors:
if(!in_array('g_438', $td_user_fonts_list)) {//'g_438', //Open Sans
wp_enqueue_style('google-font-opensans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on menus/small text

This has the light, normal, semi-bold, and bold weights, however does not have the italics, which I am not sure appends or replaces the main element at line 889.

Likely if one were so inclined they would edit the line 889 to add all the weights desired for Open Sans, remove the fonts and languages not being used, following the schema spit out from the Google Fonts website font builder:
http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

e.g., Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700

so, you could edit this code like so:
wp_enqueue_style('google-font-rest', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700'); //used on menus/small text

For expert users, one might actually remove that block from the td_fonts.php file entirely, edit the style.css to search/replace all fonts to Open Sans, then grab the CSS from Google’s server by loading the above URL in a browser, and putting all the styles at bottom of the style.css sheet (I actually did this for Newspaper on one site, for better PageSpeed Insights score).

I only provide these examples as possible solutions and they may not apply to you. Hope that helps somebody on this topic.

Admin:
you may want to add the wrap function for this forum for long lines.

Chris

Thanks. I am hopeful this is updated soon.

I’ve tried making the change in your screencapture you provided above: http://screencast.com/t/erMAsiPYbjj

This is what I changed to:
$temp_css_google_files .= str_replace(' ', '+', td_fonts::$font_names_google_list[$font_id_from_list]) . ':400,400italic,700,700italic';

What I need is to see the real italic with Droid Serif but here is what I’m getting: http://screencast.com/t/sNPsTpy0eEG

Sure don’t like the way this looks… appreciating your help!

Jeff

Thanks. The lack of true italics is certainly a problem, even more so with fonts like Droid Serif, which we are using for our article text. It’s simply not right and looks bad. I would think this is a top level issue and one which I hope is resolved sooner rather than later.

Thanks much.

Jeff

Of course, you can try my solution to fix it “right now” by adding the italics to the section after line 902 (or if it moved back to functions.php in v1.1 the appropriate code for droid sans there); or add the italic pull from Google to bottom of style.css.

Built in fix would be optimum, of course.