How to download my Active Futura PT fonts to my Mac and install them in WordPress

First I downloaded the Custom Adobe Fonts (typekit) plugin from within WordPress and activated it: https://wordpress.org/plugins/custom-typekit-fonts/

Then I opened up my Creative Cloud app, clicked the f (font icon) upper right corner, clicked the Browse more fonts (which opened this page here https://fonts.adobe.com/fonts?purpose=desktop&referrer=dd01e5bd12), entered in the search text Futura PT (which opened this page here https://fonts.adobe.com/fonts/futura-pt), clicked Activate font next to the font types I wanted, after that I clicked the </> icons next to where it says Futura PT Book or Futura PT Medium and so on to make a Web Project. I clicked the Create a new project from the dropdown menu. This Web Project will then provide me with a Project ID and a text code which can be copied and pasted into WP (WordPress). Then in the upper right corner there is a tab called My Adobe Fonts, I clicked that and then in the almost upper left corner I clicked the 3rd option from the left called Web Projects, here I copied the Project ID and pasted it in to WP in the sidebar tab called Appearance>Custom Fonts> and here in the upper right corner Add New Custom Font> and under Font Type where it says Upload File in a drop down menu, I changed this to Adobe Type Kit and then underneath there I entered in my Project ID in the Adobe TypeKit Project ID field>then I clicked the Publish button to the far right.

Then I clicked the Appearance>Customize and here I clicked the Additional CSS menu/tab and pasted in the code (in order) for each font I activated in the previous steps.

Then I clicked the Appearance>Adobe Fonts and pasted in the Project ID here as well and clicked refresh.

NOTE: To the far right it says "

1) Once you get the Kit Details, all the fonts will be listed in the customizer under typography for only Astra WordPress Theme users"

This is absolutely NOT true! I do NOT use the Astra WP Theme. I use a refined316 theme with the Kadence framework. It works perfectly 😉 

So my CSS codes I copied into the Additional CSS menu/tab are as follows:
font-family: futura-pt, sans-serif;
font-weight: 300;
font-style: normal;
font-family: futura-pt, sans-serif;
font-weight: 300;
font-style: italic;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: italic;
font-family: futura-pt, sans-serif;
font-family: futura-pt,sans-serif;
font-weight: 500;
font-style: normal;
font-family: futura-pt,sans-serif;
font-weight: 500;
font-style: italic;
font-weight: 600;
font-style: normal;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: italic;
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: italic;
font-family: futura-pt, sans-serif;
font-weight: 800;
font-style: normal;
font-family: futura-pt, sans-serif;
font-weight: 800;
font-style: italic;

I made a change an added an extra font code here afterwards which was not visible to use in the fonts dropdown menu. I had to figure out to go back into the Appearance>Adobe fonts and clicked the refresh tab before it worked. 

So there you have it. Hope it can help others in this jungle of codes and bits etc.

Kindest regards

Michael