Styling 101: Embedding Web Fonts in 3 Easy Steps
Whether you’re building a simple HTML web page or a fleshed out full stack application, we all know styling is crucial, and one easy way to incorporate styling into your application is through typography. There are thousands of free fonts that you can incorporate into your website, and today I’m going to talk you through how to do that in just a few simple steps.
1. Go to the Google Fonts website and pick the one you like.
Google Fonts is a library of fonts that are available to use. It’s my favorite of the font libraries because it is simple, easy to use, and most importantly, free! Choose one that you like; for this demonstration I’m going to play with Zen Tokyo Zoo.
2. Copy the <link> tags provided and paste inside the head of your HTML.
See the code on the bottom right corner of the above screenshot? In order to embed our font family into our application, we need to copy and paste all of that code into the <head> of our HTML file. It’ll look something like this:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Embedding Web Fonts</title> <link rel="stylesheet" href="./assets/stylesheets/main.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2? family=Zen+Loop&display=swap" rel="stylesheet"> </head> <body> <h1>I love fancy fonts!</h1> </body></html>
3. Implement the font in your CSS file.
If you scroll down just a little bit on the right side navigation on the Google Fonts page, you will see something labeled “CSS rules to specify families”. The code below that is what you are going to put inside the CSS file of your application. For Zen Tokyo Zoo, it looks like this:
font-family: 'Zen Tokyo', cursive;So, if I want to implement the embedded font in all of my h1 elements, it would simply look like this:
h1 {
font-family: 'Zen Tokyo Zoo', 'Helvetica Neue', Arial;
}Note: it’s always recommended to follow your embedded web fonts with some alternative fonts just in case your browser doesn’t recognize it.
Here is what my simple page looks like with my new fancy-shmancy font:
It’s pretty wild to me what a difference typography makes for the styling of a webpage; it’s such a simple adjustment but can make a huge difference on the UI of your site, particularly if you are short on time. Play around with it and happy coding!
