FROM CACHE - en_header

Adding font from Google Fonts to Venture theme.

Solved
Gerius
Tourist
20 0 1

Does anyone have a step by step guide on how to add a Google Font to your theme's font library?

 

This is the font I want to use: 

https://fonts.google.com/specimen/VT323?selection.family=VT323

 

Thanks in advance.

Accepted Solution (1)

Accepted Solutions
cmartinez89
Shopify Partner
112 10 35

This is an accepted solution.

Here's what line 374 and on looks like: 

 

// Accent text
$font-stack-accent: 'Pacifico', Helvetica, Arial;
$font-style-accent: {{ accent_family.style }};
$font-weight-accent: {{ accent_family.weight }};

// Body text
$font-stack-body: 'Pacifico', Helvetica, Arial;
$font-style-body: {{ base_family.style }};
$font-weight-body: {{ base_family.weight | default: 400 }};
$font-weight-body-bold: {{ base_family_bold.weight | default: 700 }};

$font-size-base: {{ settings.type_base_size }}; // Henceforth known as 1em
$font-size-nav: em({{ settings.type_nav_size }});
$font-size-button: em({{ settings.type_nav_size }} - 1);

If you have a backup, please revert all changes you have done except for these variables. There's no need to paste all the font family code everywhere when you have variables in sass. All you do is replace the variable value, and it beams it across the site as soon as you hit save. This is by no means a perfect solution, but it you read more about sass and come back to font weights, and experiment, you can customize the look and feel of the font using the other variables as well. And if you ever want to change it, you know exactly where it is, and you can change it fast.

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.

View solution in original post

Replies 26 (26)
cmartinez89
Shopify Partner
112 10 35

Hey there, easiest way is by following this tutorial from google. https://developers.google.com/fonts/docs/getting_started It's a simple link you put in the <head>.

<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">

Then you can specify the styling in your css, or do an inline style on the page itself. However, if you want to keep your css together, you can import from your . css instead:

@import url('https://fonts.googleapis.com/css?family=VT323&display=swap');

Then specify your font styling with a class in your css:

.example-h1 {
font-family: 'VT323', monospace;
font-size: 35px;
}

Then use that css class whenever you want to pull the font on your page: 

<div class="container">
<h1 class="example-h1">I am a google font!</h1>
</div>
I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

Thank you! I followed the steps & got it to work but it only shows up for the body text & not the headers. Any idea on how to get it work for header text?

cmartinez89
Shopify Partner
112 10 35

Sweet! Just assign the class to the header title.

 <h1 class="example-class">This is a title</h1> 

Or, if you did an inline style, you'll have to repeat it again for the title:

 <h1 style="font-family:google-font,fallback-font; font-size:35px;">This is a title</h1> 

If you want to change everything site wide fast, find your default title class by pressing command or control f, and searching for "font-family" in your css and replace the font-family value with the google font you imported. I don't want to confuse you or mess anything up though, so only do that when you're comfortable. For now, i would recommend using a class this way you're not overriding anything just yet, and you can always remove the class later.

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

I basically added the code for the font right before the </head> & it shows for only the body text:

Screen Shot 2019-05-25 at 7.20.57 PM.png

 

I'm not exactly sure where to add this code though -> 

<h1 class="example-class">This is a title</h1>

 

My goal is to have the font appear for anywhere else that text appears throughout the whole theme. I am use the Venture theme by the way. I'm not sure if that makes a difference.

 

Your help is appreciated.

Gerius
Tourist
20 0 1

I realized that when I put the code in front of the </head> tag, it removed the theme sections on the home page (slide show, collections, etc), so I had to removed the code. Any idea how to get this to work without having the code remove sections?

cmartinez89
Shopify Partner
112 10 35

You need to put the bit of code for google fonts in the head. Not after, or before:

<head>
...
...
...
<link rel="stylesheet".....> <--- That's your font
<link rel="stylesheet".....> <--- That's your css
...
....
</head>

If you want it site wide, change your h1 font family in your css. It may be under a different class though, you’re going to have to use google page inspector to find it. Using chrome, Right click on the title, press inspect, and see what css class it’s pulling from. Modify that header or title class’ font family. It'll look something like this: 

.header-title {
font-family: "xyzfont", helvetica, arial;
font-weight: 37px; 
...
...
...
}
replace the original header title class with your new font family
.header-title {
font-family: "newfont", helvetica, arial;
font-weight: 37px; 
...
...
...
}

 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

So I have been able to change the font of just about every element, except for the H1 header on the cart page. As you can see in the screenshot, I've changed the H1 font family in every place that I could within the theme.scss.liquid file and nothing seems to change it. Any suggestions?

 

Screen Shot 2019-05-26 at 3.09.04 PM.pngScreen Shot 2019-05-26 at 3.15.49 PM.pngScreen Shot 2019-05-26 at 3.15.39 PM.pngScreen Shot 2019-05-26 at 3.15.29 PM.pngScreen Shot 2019-05-26 at 3.15.13 PM.pngScreen Shot 2019-05-26 at 3.15.01 PM.png

cmartinez89
Shopify Partner
112 10 35

It appears you are editing classes pertaining to the rich text editor (.rte) which is what you use when you're writing a blog post for example. I've never actually fiddled with any of that. With google chrome, highlight the cart heading text, right click and inspect, and see exactly what class it's pulling from. It will tell you in what file as well. You then copy that class, and modify it. It's so hard to see what's going on still though. There may be another class overwriting it, since page reads top to bottom, or it could be hidden in a sass variable.Just can't tell. You can send me your shop url through a message and i'll be happy to help you pin point this down. Here's an example of what a sass variable will look like:

 

font-family: $font-family;

Please be sure to make a backup if you haven't already.

 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

So I figured out where the Cart header is being pulled from &  navigated to the headings section in theme.scss to add  font-family: 'VT323', monospace; to h1 (which is where the inspector directed me to look). I've tried adding to a few places under h1, but the font is still being overwritten by the original font. Funnily enough, unchecking the box for the original font shows the font that I want added -> font-family: 'VT323', monospace; but of course this only works in the inspector.


I've attached some more screenshots which can hopefully give you a better understanding of what I'm seeing on my end.

Screen Shot 2019-05-27 at 2.22.18 AM.pngScreen Shot 2019-05-27 at 2.24.13 AM.pngScreen Shot 2019-05-27 at 2.25.25 AM.png

 

cmartinez89
Shopify Partner
112 10 35

If it works in the inspector, it works on your site. That is why the inspector is so useful. You can deploy customizations before ever touching your actual site, and in real time. Try searching for this: 

h1, .h1, .h1--mini

Make sure you don't change anything that is attached after, for example if there's a similar class:

h1, .h1, .h1--mini, h1-example, h1-example2 

Make sure it's only the three. And see if it's pulling a sass variable or displaying the css font family. Change it to the google font if so. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

Added it to all three places, but the change still does not appear. I even commented out lines where the code was inheriting the default value. Any ideas?

Screen Shot 2019-05-27 at 2.39.10 AM.pngScreen Shot 2019-05-27 at 2.37.26 AM.png

cmartinez89
Shopify Partner
112 10 35

Did you search for the class i mentioned? Copy and paste that class into the search. See if it comes up. The class you're searching for in your css should be 

 

h1, .h1, .h1--mini

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

Searched, but nothing showed up.

Screen Shot 2019-05-27 at 2.44.31 AM.png

cmartinez89
Shopify Partner
112 10 35

Whoops! I thought all of them were highlighted. Looked again, and the only class highlighted is the h1 class. You can see that in the inspector, the others are greyed out. That's an indicator that it's the h1 class. Have you searched simply for h1? It says it's on line like 9,358? 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

I have. I've added the font family in those places as well.Screen Shot 2019-05-27 at 2.51.37 AM.png

cmartinez89
Shopify Partner
112 10 35

Search all h1's throughout your whole theme css, click the down arrow. It's saying it's pulling around line 9000+, you're at 1700+

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

The file only has about 6600 lines. Not sure why it's saying to go to lines 9000+.

Screen Shot 2019-05-27 at 2.54.51 AM.png

cmartinez89
Shopify Partner
112 10 35

Do you have one big class at the top of your theme on line 1? Is the h1 in that class? 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
Gerius
Tourist
20 0 1

I'm not sure. This is what the very top of the file looks like:

Screen Shot 2019-05-27 at 3.05.39 AM.png