Adding Google Fonts

help
1

Hi there, this is my first post appealing for help - I hope this is the best place

How best would I add these. From <head> I would like to add:

  <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>

Thanks all!

Jon.

1 Like
2

You can just add this within the <head> tags of any html file inside the client folder. Also you can take out the “http:” and you won’t get an error when using SSL :smile:

1 Like
3

you can also throw the below in a JS file anywhere client side
this has the benefit of loading the fonts async

// async loader for fonts
// https://github.com/typekit/webfontloader

Meteor.startup(function() {

  WebFontConfig = {
    google: { families: [ 'Roboto Slab:700,400:latin', 'Oswald:400', 'Mouse Memoirs' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
    console.log("async fonts loaded", WebFontConfig);
  })();

})
7 Likes
4

Thanks both… That’s great.

6

Oops, posted at first with the wrong account. I hate to zombie-bump an old thread, but with NPM available in Meteor there is a much better way to do this. And this is still the top google result for ‘meteor google fonts’.

The method above waits until the DOM is loaded to download webfontloader, which then has to go out and request the fonts you want. Better to bundle webfontloader and streamline the process:

Run npm install webfontloader, then place anywhere client side:

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: [
      'Nunito:regular,bold',
      'Lato:regular,bold,italic',
    ],
  },
});

I discuss this and how to prevent FOUT in more detail in my blog post on the topic.

4 Likes