Add fonts from one theme to another

[Taytertots]

Hello!

I have two themes for landing pages, one that HubSpot built, supposed to resemble our website, and another theme that I partially built from scratch. I would like to take the fonts that are uploaded in the HSpot theme and add them to my other one.

Here is the code for the fonts that I want:

/* ==========================================================================
1. EXTERNAL RESOURCES                                            
========================================================================== */


/* =============== @import, @font-face, and CSS File Includes =============== */

/* EX: @import url('http://example.com/example_style.css'); */
@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css');

@font-face {
  font-family:"myriad-pro";
  src:url("//use.typekit.net/af/1b1b1e/00000000000000000001709e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
    url("//use.typekit.net/af/1b1b1e/00000000000000000001709e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
    url("//use.typekit.net/af/1b1b1e/00000000000000000001709e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-style:normal;font-weight:700;
}

@font-face {
  font-family:"myriad-pro";
  src:url("//use.typekit.net/af/2e2357/00000000000000000001709f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
    url("//use.typekit.net/af/2e2357/00000000000000000001709f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),
    url("//use.typekit.net/af/2e2357/00000000000000000001709f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
  font-style:italic;font-weight:700;
}

@font-face {
  font-family:"myriad-pro";
  src:url("//use.typekit.net/af/d32e26/00000000000000000001709b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
    url("//use.typekit.net/af/d32e26/00000000000000000001709b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
    url("//use.typekit.net/af/d32e26/00000000000000000001709b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
  font-style:italic;font-weight:400;
}

@font-face {
  font-family:"myriad-pro";
  src:url("//use.typekit.net/af/cafa63/00000000000000000001709a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
    url("//use.typekit.net/af/cafa63/00000000000000000001709a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
    url("//use.typekit.net/af/cafa63/00000000000000000001709a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-style:normal;font-weight:400;
}

/* HubSpot_Boilerplate-modules.css is required to address style issues with the default modules and responsive grid layout */
{% include "EnSight_November2018_Theme/Coded_Files/EnSight_November2018-modules.css" %}

And here are the imports for the other theme's fonts:

/* @import url('http://example.com/example_style.css'); */ 
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800');

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/****************************************/
/* HubSpot Style Boilerplate            */
/****************************************/

/* These includes are optional, but helpful. */
{% include "hubspot/styles/responsive/modules.css" %}
{% include "hubspot/styles/patches/recommended.css" %}

I tried swapping them and adding the "

{% include "EnSight_November2018_Theme/Coded_Files/EnSight_November2018-modules.css" %} 

 line, but it didn't do anything (not that I thought it would, since that's one stylesheet referencing another). If anyone has a good idea for adding these fonts, that would be greatly appreciated.

Thank you and Happy New Year 😄

[lscanlan]

Hi Taytertots,

I have a few suggestions for you here. First, I'm happy to look at any specific files / templates that you're working on if you'd like; just link me to them here.

Second, since those font URLs live on use.typekit.net, it looks like you're using Adobe's font service. It was previously called Typekit although they've rebranded it to Adobe Fonts. Those font files will periodically get moved around to different URLs, meaning the fonts will stop working once that happens. Since you're loading them from specific URLs, once the fonts are moved, the fonts won't live at the URLs that in are in your stylesheet. So I'd suggest following Adobe's instructions for creating a "kit", and then one of their suggested methods for getting the fonts loaded onto your site. Their instructions are here: https://helpx.adobe.com/fonts/using/add-fonts-website.html . I'd suggest using the @import link, because you can add it directly into your stylesheet.

Once you've done that, you should be able to use the HubL include statement for "including" one stylesheet into another. If it doesn't work right away, it could just be that something is caching and you may need to wait a few minutes. Or you could also use the @import URL in both stylesheets and it should work fine. Whenever Adobe updates the URLs for their font files, the @import URL will also update them automatically and your fonts will continue to load properly.

I hope this helps. And again feel free to link me directly to what you're working on and I'll be happy to take a closer look.

[Taytertots]

Hi @lscanlan, thank you for the quick response!

Here is a link to the code for the template I'm using (it's in jsfiddle):

https://jsfiddle.net/hdv5upyb/

And a link to the other template, which has the fonts I need to bring over:

https://jsfiddle.net/5dkoxtca/

Let me know if you need anything else to help see what the best option would be.

Thank you!

[lscanlan]

Actually, do you have a link to the stylesheets in HubSpot? It's a little hard to say what's going wrong (aside from the suggestion of creating a "kit" in Adobe Fonts) from the jsfiddle links, since our tool isn't transpiling the code. So none of the HubL statements (like {% include %} for example) will work in jsfiddle. Or feel free to send me a direct message with the links if you'd prefer. I'm a HubSpotter so I'll be able to log in and see what's going on. For what it's worth, the code itself that I see in jsfiddle looks valid, but it might be helpful if I can see what's happening within HubSpot.

[Taytertots]

Sure, I'll send a direct message.