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.
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:
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:
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
How did I miss this?! It’s RIGHT IN THE
Running the command, produces result:
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.
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
- Manually via
git clone email@example.com:FontFaceKit/roboto.git
- Automatically via
npm run installGoogleFonts
No matter which way to install, I learn to always consult the
README.md file first!