How to include Fonts

help
1

I am using Google Fonts in my project and it works fine when I use the Link method. However, the fonts don’t render if I am offline. How do I include the downloaded Google Fonts in my Meteor-React project so that they work offline as well? I searched for the answer but was not able to locate it.

Thanks.
Ken

2 Likes
2

You can either bundle them in a package. Or you can put them into your public folder and load them in by adding them as <link>s in your head.

1 Like
3

Yeah, you’re going need to download the fonts and then bundle them in a package. Here is an example:

Just ‘git clone’ it into your packages directory, then ‘meteor add clinical:fonts’ and follow it as a guide to implementing any other fonts you want.

1 Like
4

Thanks @idmontie and @awatson1978. I will give this a try my next chance. Always appreciate the help.

Ken

1 Like
5

Trying this now, but can’t navigate to my packages directory. I can

cd .meteor 
Kenneths-MacBook-Pro:.meteor PTKen$

but I cannot get the packages directory:

Kenneths-MacBook-Pro:.meteor PTKen$ ls
local    packages    platforms    release   versions
Kenneths-MacBook-Pro:.meteor PTKen$ cd packages
-bash: cd: packages: Not a directory

What am I doing wrong? Thanks.
Ken

1 Like
6

packages is a file, not a directory.

1 Like
7

Oh, I see. Thanks @peterm. So what did @awatson1978 mean when she said [quote=“awatson1978, post:3, topic:16702”]
Just ‘git clone’ it into your packages directory,
[/quote]

How do I do this? Thanks.
Ken

1 Like
8

I think @awatson1978 meant that you should add the following line to your .meteor/packages file:

clinical:fonts

That will add the package to your meteor project.

1 Like
9

Okay, I will try this. But that doesn’t answer the original question about how do I add Google Fonts to my project so that they work offline. I have downloaded the Fonts that I want to use, but where do I put them and how do I include them in the project?

Thanks.

1 Like
10

I have created a directory “packages” in my project folder and included the google fonts. I followed the clinical fonts as a guide to create the css and package.js files. It works well enough that the app will launch now but I get an error in the console that the downloaded fonts could not be decoded. I didn’t understand everything in the css and package.js files, but I will comb through them again and if I still cannot make it work I will post my code.

Thanks for the help. Getting there… :smile:
Ken

1 Like
11

Another option would be to use kadira doc head package to add the icons to the header as a style sheet kadira:dochead

1 Like
12

But won’t that just generate a link in my header? I want to include the fonts as a resource in my app so that they will continue to work offline.

1 Like
13

Okay, I’m making progress, but I can’t seem to make it work. This article from The Meteor Chef really helped me fill in the gaps, but I apparently still have some gaps left. I’m hoping the community can help…

I have created a “packages” directory and assigned it to an environment variable. Typing env confirms it’s correct:

PACKAGE_DIRS=/Users/PTKen/Documents/Meteor Projects/packages

Here is the code in my package.js file:

Package.describe({
  name: 'projectname:fonts',
  version: '1.0.0',
  summary: 'Fonts from Google Fonts',
  documentation: 'OFL.txt'
});

Package.onUse(function(api) {
  api.versionsFrom('1.1.0.3');
  api.addFiles([
'fonts/Quicksand-Bold.ttf',
'fonts/Quicksand-Light.ttf',
'fonts/Quicksand-Regular.ttf'
  ], 'client', {isAsset: true});
});

In my css files, I have tried the following:

font-family: 'Quicksand'; `` font-family: 'Quicksand-Regular';

Neither one shows the correct typeface. I also do not get any errors in the console when building the app. Does anyone see what I did wrong?

Thanks!
Ken

14

Typically you have to define a font-face then apply it to an element. For example, you could have this code in a css file:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
}

html, body {
  font-family: 'Roboto', sans-serif;
}

More info here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

15

@ptken can you please explain what you did? I am also trying to add the google fonts to my Meteor-React project…

16

I have not been able to make this work yet. I decided to push it lower on my priority list so that I can just move forward for now. If you figure it out, please post here. :wink:

17

Hi @ptken @noushka86 I have the same issue since two days, do you have find the answer? :stuck_out_tongue:

18

Download the fonts, put it in public/fonts then reference it in your css with @font-face if you need offline support. Otherwise just @font-face it with the google fonts link.

1 Like
19

Thanks @joshig ! :tada:

20

A year later it seems, that you still have to do this.

Having to copy stuff from node_modules to the public folder is disgraceful. And it really becomes a problem when it’s not your own code that uses the font but if it’s from within components you got via npm. Then you not only have to copy some font but need to deal with the component and it’s dependencies.

This is not a minor inconvenience.
This really has to get fixed ASAP.

4 Likes