TIL - how to install Google Fonts in an Angular application

I want to share a recent experience building an Angular project. I encountered a build error with my Angular project that involved roboto, a Google Font, and walk through how I solved it.

You will learn two different ways to install Google Font in an Angular application, manually and automatically.

This article will take you less than four minutes to read.

source and more information

How did I get in this mess?!

When I was building my Angular application to test out a feature, I ran into the following issues:

vagrant@ubuntu-bionic:~/ng-project npm start
[...lotsa work...]
ERROR in multi ./src/styles.sass ./node_modules/font-awesome/css/font-awesome.css ./vendor/roboto.css ./node_modules/dragula/dist/dragula.css
Module not found: Error: Can't resolve '/home/vagrant/ng-project/vendor/roboto.css' in '/home/vagrant/ng-project
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

What the?! Am I missing something?! I’m on the master branch of the project. Surely, this project would not be in production if it fails the build locally.

Am I the only one with the issue?

I reach out to a team member and asked if he had an idea.

In angular.json what does your "styles": [] array look like?
You probably have the roboto.css file, but the reference in that angular.json file is not pointing at the right place
apparently the way angular read these styles changed between angular 6 and angular 7

Hmmm, that does correspond to other search results I found when doing a quick search on the error.

At the same time, I just don’t believe a new install of my Angular application would require modification, especially when it is up to date.

Tracking down Further

I found a copy of the font, specifically the roboto.css file giving the error. The roboto.ttf is available and I don’t believe would be so useful if the error is asking for the css file.

Solution 1: Install font manually

The first solution that worked for me:

git clone [email protected]:FontFaceKit/roboto.git
cp roboto/roboto.css roboto/fonts ~/ng-project/vendor/

vagrant@ubuntu-bionic:~/people-cloud$ npm start
[...lotsa work...]
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

YES! Success. This solution felt weird because I never had to take this approach to solve it.

Solution 2: Install font automatically

Well, now that things are working, I ask: can I do better?

I take a look at the README.md file that’s included with the project and right after npm install the file says to execute:

npm run installGoogleFont

(facepalm)

How did I miss this?! It’s RIGHT IN THE README.md FILE!

Running the command, produces result:

vagrant@ubuntu-bionic:~/ng-project npm run installGoogleFonts

> [email protected] installGoogleFonts /home/vagrant/people-cloud
> goog-webfont-dl -a -f Roboto -d vendor/fonts -o vendor/roboto.css -p './fonts/'

Downloading webfont formats: “ttf,eot,woff,woff2,svg” to folder “vendor/fonts”
https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic
CSS output was successfully written to “vendor/roboto.css”

Sigh, two hours of debugging and asking a team member for ten minutes of help. Weirdly, they didn’t have the solution off the top of their head either.

I definitely sense there’s opportunity to improve application build and/or new developer on-boarding process. This is a work in progress and I hope to have posts on it in the future.

Conclusion

What was a failure on my part to just read the README.md file is making me think that my application build and/or developer on-boarding process needs work.

As someone that has been on the team for a while, not being able to spin up a development version of my application without consulting every file is deeply troubling.

On the bright side, I found two ways to install roboto.css into an Angular application:

1. Manually via git clone [email protected]:FontFaceKit/roboto.git
2. Automatically via npm run installGoogleFonts

No matter which way to install, I learn to always consult the README.md file first!