Google Fonts is a free, open-source library of fonts that anyone can use on their website. You can find thousands of different fonts to choose from, and they’re all available for free. All you need to do is add a few lines of code to your website to load the fonts you want to use.
If you’re using Shopify, then you can use Google Fonts by adding a little bit of code to your theme.liquid file. First, you need to find the code that loads your theme’s CSS file. This is typically near the top of the file, and it will look something like this:
<link href="{{ 'theme.css' | asset_url }}" rel="stylesheet">
Next, you need to add a new line of code after that line, which will tell Shopify to also load the Google Fonts you want to use:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
In that code, you need to replace “Roboto” with the name of the font you want to use. So, if you wanted to use the “Open Sans” font, you would change that line of code to this:
While adding Google Fonts to your Shopify shop is relatively easy, it’s important to note that you’ll need to have a basic understanding of HTML and CSS in order to do so. Additionally, keep in mind that not all fonts in the Google Fonts collection are free for commercial use. Be sure to check the licensing information for each font before using it on your website.
<link href="https://fonts.com/css?family=Open+Sans" rel="stylesheet">
You can use as many different fonts as you want on your website by adding multiple lines of code like that. Just make sure that each font is on its own line.
Once you’ve added the code to load the fonts, you need to actually use them in your CSS. To do that, find the CSS rule where you want to apply the font, and then add “font-family: ‘Roboto’;” (or whatever font you’re using) to that rule. For example:
body {font-family: 'Roboto';}
That’s all there is to it! Now go forth and make your website look even more amazing with beautiful typography.
