adding fonts from adobe

Site URL: https://fonts.adobe.com/

i have access to lots of type through my adobe account, which allows for embedding of webfonts. the instructions for doing so are pretty cryptic. here are two screens with code i can copy, but am not sure where each of these bits of code go within the squarespace interface. 

would the <link rel...> code go into "settings > advanced > code injection"? here is the code it generates:

<link rel="stylesheet" href="https://use.typekit.net/pyw0kmh.css">

and would the code from the screenshot below go in to the "design > custom css" area? here is the code it generates:

font-family: sabbath-black, serif;
font-weight: 400;
font-style: normal;

font-family: sabbath-black, serif;
font-weight: 800;
font-style: normal;

thanks in advance for any help!

i finally figured it out. the same principles apply to adobe fonts and google fonts. using google as my reference since it's free and publicly available. 

header code such as 
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;900&display=swap" rel="stylesheet">

is pasted into "settings > advanced > code injection" in the "header" area for code injection. 

the specific css rules are pasted into "design > custom css" but needs the requisite html tags such as h1, h2, h3, p. the code offered from adobe or google usually looks like this:

font-family: 'Roboto Slab', serif;

add additional css selectors and curly braces to validate the css:

h3 { 
font-family: 'Roboto Slab', serif;
}

Thank you so much. I have been looking all over on whether I need a premium subscription to access my Typekit fonts which is true because of the custom code injection. This seems to have changed based off of other tutorials that are less than a year old which only needed the Typekit ID in the advanced setting in design. 

Now I do have a question, do you need to publish for the fonts to take effect? I am working with trial version so I can see if what I want can work.

Thanks again!