When do I put code in the Header/Footer and when do I not put code in the Header/Footer

Now that I have the business plan, I'm trying to read articles and understand when I should place code in my header/footer and when I should not.  EXAMPLE.  Below is the google font that I am using throughout the site.  Shouldn't this go into the header code-injection instead of the CSS design box.  I'm still researching this to see how to best implement these change.  My thought is sitewide changes can go into header code while specific ID's can go into CSS Design or even page code injection (which I think I understand but I will look up for better understanding).  Just wanted some of your professional thoughts.  Thanks.

@import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.instrument-sans-instrument {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;}

// -- END FONT DESIGN CHANGE -- //
 

@Ziggy  Ok, below is an example.  I added all of these to my sitewide code injection because I want these to affect everything.  But I left anything that dealt with data-section, #collections, or #blocks in the Custom CSS portion.  Some of which could get added to a page code but I can never find where I added the code which is why I leave it i Custom CSS.  Is this the way you mean and thank you again for the response. 

<style>
/* changes font site wide */
@import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.instrument-sans-instrument {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;}
</style>

<style>
/* Change Burger Menu Color On Mobile */
body:not(.header--menu-open) .burger-inner>div {
    background-color: white!important;
}
</style>

<style>
/* Move Over Hyperlinks */
p a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

p a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}
</style>

<style>
/*smooth scroll*/
html {scroll-behavior: smooth;}
</style>

<style>
/* Header Navigation - Pill Hover Style - Ghost */
.header-nav-item a {
  padding: 0px 5px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}
.header-nav-item a:hover {
  background: black;
  padding: 0px 5px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}
</style>

<style>
/* this changes all video captions on entire site */
.video-caption-wrapper 
{text-align: center; font-size: 1rem;
padding:0!important;}

.video-caption p {
    margin: 10px 0 0!important; ;
line-height:25px;}
</style>

<style>
/* Add Shadow To Videos */
.sqs-video-wrapper {
 box-shadow: 5px 15px 5px rgba(0,0,0,0.2)
}
</style>

<style>
/* This is for <br> line break that separates the stories */
  hr {
  overflow:initial;
  &:after {
    content:'';
    width:15%;
    height:10px;
    display:block;
    background: #0b5394;
    top:-5px;
    margin:auto;
    position:relative;}
}
</style>

<style>
/* this hover affects entire site */
a {color: #0b5394!important;
text-decoration: none!important;
  font-weight:bold!important;
}
a:hover  {
     color: #0b5394!important;
  text-decoration: underline!important;
  font-weight:bold!important;
  }
</style>

<style>
/* changes header and section width of all pages and images and videos */
#header {
    max-width: 1496px;
    margin: auto;
}
section.page-section {
    max-width: 1496px;
    margin: auto;
}
</style>

2 hours ago, MoeTalks said:

I added all of these to my sitewide code injection because I want these to affect everything.

Custom CSS is global, anything added there will affect everything.

There's no benefit to adding any of this to the Header Code Injection.

OUCH Oh @Ziggy that just hurts my heart 😂.  I thought I was doing something.  Thank you for looking this over I will keep reading and looking at videos to get a full understanding.  What is your buy-me-coffee link?  I appreciate you taking the time. 

11 hours ago, MoeTalks said:

What is your buy-me-coffee link?  I appreciate you taking the time. 

No obligation, but it's in my footer.

Buy me a coffee?