Unsplash Photo by Alice Donovan Rouse
This post assumes familiarity with CRA (create-react-app).
Ease of Typography ✨
Recently, I discovered Typography.js. I love utilities like this because thinking about design sometimes is just too much for my feeble mind 🧠.
A powerful toolkit for building websites with beautiful design.
This means that we simply yarn add typography and then pick a theme (e.g. yarn add typography-theme-fairy-gates).
Then, in our app (maybe in 'index.js'):
import Typography from "typography";
import fairyGatesTheme from "typography-theme-fairy-gates";
const typography = new Typography(fairyGatesTheme);
typography.injectStyles();
Upon removing 🔥 all of the 'boilerplate CRA 💩,' adding some basic text to render and then doing yarn start 💦 and then checking ✔️ our app in the dev tools:
With that, your typography already looks better...but depending on what fonts are on your system, you're probably looking 👀 at a 'fallback font.'
Actually Loading the 'Google Fonts' Stylesheet
This is b/c we are not actually linking to the font's 'Google fonts' stylesheet, and this is a bit tricky to 'inject' when using create-react-app due to it being a 'server' generated app.
We would need: yarn add react-typography...but since we are using CRA, it's not clear how to 'directly' inject this into our app.
The directions in the documentation are for 'non-CRA' apps where we are directly generating our entire HTML structure, as opposed to using the 'public' directory 📁.
Here's the fix:
import { GoogleFont } from "react-typography";-
Inside of
ReactDOM.render(in 'index.js' as per CRA):
ReactDOM.render(
<React.StrictMode>
<App />
{/* Add this element so we can see the 'link tag' generated in the dev tools markup. */}
<GoogleFont typography={typography} />
</React.StrictMode>,
document.getElementById("root")
);
Now, have a look again in 'dev tools' for your App and see something like this:
Notice the link tag there.
Copy that and dump it into the <head> tag of 'public/index.html':
<link
href="//fonts.googleapis.com/css?family=Work+Sans:600|Quattrocento+Sans:400,400i,700"
rel="stylesheet"
type="text/css"
/>
<title>Expenses!</title>
</head>
You can now completely remove:
{/* Add this element so we can see the 'link tag' generated in the dev tools markup. */}
<GoogleFont typography={typography} />
You can also yarn remove react-typography
Top comments (0)