I tried adding a couple of custom fonts to my site yesterday, and I'm not sure what I'm missing in the setup. I'm using the Vast theme, and the code looks like this:
I placed it in its own folder, according to the Hubspot instructions here but the fonts aren't showing up as options in the templated landing pages.
This is the folder location for the fonts:
The step that I think I might be missing has to do with importing the font URL into the regular stylesheet. I tried by copying the URL from the Actions menu, then placing it here: (bolded area w "figure this out" is my import attempt)
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
@import url(http://fonts.googleapis.com/css?family=Montserrat:700,400);
@import url(//designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css);
/*figure this out: */@import url({{ get_public_template_url('Vast/Fonts-EnSight.css') }})
/**
* CSS @imports must be at the top of the file.
* Add them above this section.
*/
/* ==========================================================================
HS COS Boilerplate v1.3.0
*/
/* This responsive framework is required for all styles.*/
{% include "Vast/Coded_Files/vast-modules.css" %}
If anyone knows where I went wrong/what I should be doing w the import URL, I'd really appreciate it.
@Taytertots - I think, ultimately, your problem is that you are referencing a relative file but I'm skeptical that is going to work because you should be using the cdn link for the font files... e.g.
Thanks for responding! I'm a little confused since these fonts aren't Google fonts, they were purchased from Typekit and so there isn't an actual URL to add in, just the font names. In the HubSpot instructions that I tried following, it said to copy the URL from the dropdown and that would include all necessary elements for the theme's stylesheet to read. If the fonts don't have any attached URLs, wouldn't this affect the process (whether I write the code as you did or add in the copied link from the dropdown, as I tried before)?
If you purchased with typekit, i believe you have to create a "kit". That is where you will assign the domain using the font. Once you have that set, it should give you 3 options to use on your site. I use the @import option and place at the top of my stylesheet.
@dennisedsonwhich URL did you tie the kit(s) to? I'm working with a site that isn't yet live. The URL is ensightplus.com but we're working with a dev version for now and of course the landing pages are through HubSpot so they don't actaully share that domain.