Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

adding fonts from adobe


tylergalloway

Question

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">

 

838329472_ScreenShot2020-04-15at4_38_26PM.thumb.png.3f187e2425bbe802d1770fc768be9cc2.png

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;

669974339_ScreenShot2020-04-15at4_50_33PM.thumb.png.5a79311308077fcc07288481ce055d00.png

thanks in advance for any help!

Link to comment

2 answers to this question

Recommended Posts

  • 1

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. 

119374875_ScreenShot2020-04-17at11_15_53AM.thumb.png.88284114ba7939cc6e4c61e2a739a0c6.png

 

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;
}

516094514_ScreenShot2020-04-17at11_16_54AM.thumb.png.179ff5c91fe54a81667680e685cf6478.png

 

Link to comment
  • 0

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...