Like many web developers I often find myself swapping, adding, and removing Google Fonts from my web applications. This evolution of a project can often result in a large consumption of precious time when scrambling to create an updated link href provided by Google. When we have an impending deadline coming up, developers need to find ways to keep things quick and hasty. A closer look at the link href provided by Google can reveal ways we can edit this line of code to add and remove font-families from our project.
<link href=”https://fonts.googleapis.com/css?family=Galada|Secular+One” rel=”stylesheet”>
Here we have two font families. Galada and Secular One. The first thing to note is the Vertical Bar character between font families Galada and Secular One. A quick test revealed that whenever you desire a new font family to be added to your project you simply need to put a vertical bar after the last font family in the href followed by your new font family.
Example:
Here I add the new font family Merriweather to the href.
<link href=”https://fonts.googleapis.com/css?family=Galada|Secular+One|Merriweather“ rel=”stylesheet”>
If you need to add a font family that has multiple words in its name you simply replace the space between words with the plus symbol. You can see an example of this in the above href where Secular One is entered as Secular+One.
In addition if you need to add a desired font weight to a specific font family you simply add : after the font family name followed by the weight and a comma after each font weight that follows.
Example:
<link href=”https://fonts.googleapis.com/css?family=Galada: 100, 400” rel=”stylesheet”>
Time saving hacks like editing the Google Font href can really add up at the end of the week. Simple in theory but powerful in numbers I recommend every developer have a arsenal of hacks and tricks to prevent lost project time.
Alex Janssen 