Typekit script in .js?

New Here ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

Hi there!

 

Require a bit of help on this situation I'm facing.

 

We acquired full control of a website from the previous web designers a while back and recently discovered that majority of the fonts went from serif (Freight family, taken from Typekit) to sans-serif.

 

We believe that the Typekit account used by the previous web designers have depreciated, hence the font issue. This is what we see in the source code (bolded the Project ID):

 

<script src="https://use.typekit.net/ryh0phl.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
 
We assumed that we could just generate a new code, replace the previous Project ID and all would go well. But this isnt the case as the generated code from our own Adobe account is in .css and written differently (bolded the Project ID):
 
<link rel="stylesheet" href="https://use.typekit.net/drp7qdn.css">
 
Has Typekit done away with the .js script? Is there a way to continue using .js?
If not, how do I go about using the above new .css script instead?
 
Much thanks.
TOPICS
Code , Error , How to , Other

Views

376

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 11, 2021 May 11, 2021

Adobe Fonts (formerly known as Typekit) uses a combination of JavaScript and CSS code to pull custom web fonts into your projects.

 

1. Log-in and select your desired fonts and variants.

https://fonts.adobe.com/fonts

2. Activate fonts within your "My Fonts" console and associate them with your new web project.

3. Copy & paste generated Adobe Fonts code into the <head> tag of your document.

4. Add the required CSS font-family, alternatives & variants to your stylesheet. 

h3 {font-family: "custom-

...

Likes

Translate

Translate
Adobe Community Professional ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

Adobe Fonts (formerly known as Typekit) uses a combination of JavaScript and CSS code to pull custom web fonts into your projects.

 

1. Log-in and select your desired fonts and variants.

https://fonts.adobe.com/fonts

2. Activate fonts within your "My Fonts" console and associate them with your new web project.

3. Copy & paste generated Adobe Fonts code into the <head> tag of your document.

4. Add the required CSS font-family, alternatives & variants to your stylesheet. 

h3 {font-family: "custom-font-name", arial, helvetica, sans-serif; font-size: 32px; font-weight: 900}

5. Save & upload your HTML and CSS documents to remote server to test. 

6. To see results, refresh your browser by clearing cached data or use a different web browser.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

Thanks for replying, Nancy!

 

Would it be accurate for me to say that I've to do away with this script altogether?

 

<script src="https://use.typekit.net/ryh0phl.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

 

And only use the method you've written above? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

Ok followed your instructions and everything is working just fine now!

 

Thank you so much, Nancy!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

LATEST

You're welcome.  Glad I could help. 🙂

 

For future reference, Adobe Fonts has a dedicated product forum below in case you have more questions about using fonts.

Adobe Fonts Community

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines