Include Google font in Sage

sage
1

What’s the best way to load Google fonts in Sage (without add <link …> in head)?

As is for Fontawesome, my favorite way would be using bower. Is it possible?

Thanks

2

I’ve done it a few different ways, but I normally just enqueue the script in lib/assets.php above the sage css.

function assets() {
  wp_enqueue_style( 'google_fonts', '//fonts.googleapis.com/css?family=FamilyName:400italic,400,700', false, null );
  wp_enqueue_style( 'sage_css', asset_path( 'styles/main.css' ), false, null );
  ...
7 Likes
3

Mmh. Are you sure that is the best way? It seems like you going hack sage. There should be a way to include it without change the core files of Sage.

4

Keep in mind that we’ve designed Sage to be a starter theme and that’s how we suggest people use it. So editing “core” files is perfectly fine if you want to.

8 Likes
5

Ok.

Anyway, is there a way to load Google fonts in sage using bower.json?

6

Bower is a front-end package manager. Since you are using Google Fonts without downloading any actual files or a package, it doesn’t really make any sense to try to include a Google Font src link with Bower.

5 Likes
7

I’ve used this method before with success:

It’s especially nice if you’re making a theme to distribute, as it allows translators to deactivate the font, if the character set doesn’t suit the target language.

Is it the best? Don’t know, but it works and has a few added benefits.

8

What I do is just adding the css import in the _global.scss and it works great.

@import url(https://fonts.googleapis.com/css?family=Roboto);
7 Likes
9

The WordPress default theme twentyseventeen uses a function: https://github.com/WordPress/twentyseventeen/blob/597cfb1550493eb247139d64cfd39a69cef0c786/functions.php#L127

1 Like