CMS Development

ErinK
Participant

Updating Font on Website

Hello:

 

Does anyone have a resource to find font files. I need Myriad Pro and Calibri. These are not on googlefonts. Also, how difficult is it to add to the css style sheet. I have some CSS experience but not a ton. The client doesnt have the two fonts in their style guide. One other question, would you recommend also using serif font as the last option in case a broswer or email provider doesnt support Myriad Pro and Calibri?

 

Thanks for the help!

0 Upvotes
8 Replies 8
Jsum
Key Advisor

Updating Font on Website

@ErinK,

 

There are a couple of methods for adding fonts to your site.

Google fonts is the easiest but has the least amount of fonts because it is free and open to use. 

 

Typekit from Adobe allows you to create importable font kits, similar to how google font works, and I believe they have more fonts. You have to specify which urls can use your kit which should include Hubspot's preview and sandbox staging url. You have to have an adobe subscription and I am not sure what the minimum for that is. I get the full suite for $45 a month and Typekit is included.

 

The third option is to use @fontface to call the font files from your server. You have to have at least one file type of the font you would like to use (.ttf, .eot, .svg, .woff, .woff2) in order to get this going, but you need all of those file types to make it work. Take the font file and go to one of:

https://www.fontsquirrel.com/
https://transfonter.org/
https://www.web-font-generator.com/

 

You will want to upload your font file and mess with any options as you see fit. What any of the above will do is take your font file and duplicate and convert it into the required file types. I think all of them but definitely font squirrel provides a .css file with the @fontface referencing those font files as well. All of this will all come back out of the generator as a .zip file. 

You need to take the font files from the .zip file and place them in your Hubspot file manager. 

You then take the css for the @fontface and place it in your site's stylesheet, at the top, below any imports. You need to copy the urls to each file type in your file manager and use them to replace the generate file paths for the font files in the @fontface, respective to their file type. Be careful not to delete any url addons, such as '#iefix' on one of the .eot file references.

You have to create one of these for each font, and I believe each weight of each font as well. afterwards you can simply call the font by using the 'font-family: <font>;' attribute from the @fontface of the font you wish to use. 

You can do this wirh ANY font you have a file of. SOME fonts will be blocked by one or maybe even all of the generators above, fontsquirrel especially, if that the font has a specific type of license. Using a font that is for charge or otherwise does not have the web kit usage rights is technically stealing so be aware of usage rights on your fonts. web-font-generator.com does not check usage rights. You can access the font files on a machine through the fonts folder. Helvetica is a mac font while arial is a windows font. If you were to purchase one for the other you would see that they are actually quite expensive. You could technically make a web kit out of either by accessing the font file from the system fonts folder and running it through the process above.

Myriad Pro is an Adobe font that comes with adobe products and is installed on machines that have that font so could technically be accessed and used as described above.

Keep this in mind, and this is something that still gets me from time to time, if the reference to font names in your css matches those in your machine's system folder, your browser will access your machine's system folder to show the correct font. Regardless of the method for implementation you use, If there are any errors with your font and you have that font installed on your machine you will most likely not see the error yourself but the font will not show for anyone whose machine does not have the font installed. This is important.

 

I would suggest staying clear of system or software specific fonts like myriad pro or helvetica, and aim to use fonts available through Google Fonts or Typekit, they make life easier. Creating your on font kit can be useful though.

 

Need help? Hire Us Here

Taytertots
Participant

Updating Font on Website

@JsumGood morning! Hope I'm not bothering you by adding to this chain, but I have a similar issue and so far, either the right question hasn't been asked or no one has been able to really answer (my original post: https://bit.ly/2y8YC62). I have several fonts to add, Myriad Pro and Proxima Nova (Typekit), and Avenir Next (converted w/ Transfonter). I created a new file with the fonts here:

/* @import url('http://example.com/example_style.css')*/
/*from TypeKit: Myriad Pro and Proxima Nova*/

<style>
  @import url("https://use.typekit.net/dtu5tgw.css");
</style>

/*Converted: Avenir Next*/
@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('AvenirNextLTPro-Medium.woff2') format('woff2'),
        url('AvenirNextLTPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('AvenirNextLTPro-MediumIt.woff2') format('woff2'),
        url('AvenirNextLTPro-MediumIt.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('AvenirNextLTPro-Bold.woff2') format('woff2'),
        url('AvenirNextLTPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('AvenirNextLTPro-BoldIt.woff2') format('woff2'),
        url('AvenirNextLTPro-BoldIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

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

And then tried using import URL for the Kit in the main Vast theme CSS:

@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);

/*from TypeKit: Myriad Pro and Proxima Nova*/
<style>
  @import url("https://use.typekit.net/dtu5tgw.css");
</style>


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

The trouble seems to be twofold, I don't have an import URL for Proxima Nova and the Typekit one is, I believe, correct but the domains where it points probably aren't. I'm not sure what domains to use with Typekit, since I want the fonts added to ALL landing pages and posts created in Hubspot, and the URL for our actual site isn't live yet.

 

Thank you!

 

0 Upvotes
DevSpot
Member

Updating Font on Website

Have you figured out a work around for this?

0 Upvotes
Jsum
Key Advisor

Updating Font on Website

@Taytertots,

 

Not a problem.

 

1. If you are creating your own fontfaces then you have to store the font files in your hubspot file manager and use the cdn url of the files for the fontface.

 

2. Typekit requires domain approval, but also it doesn't work very well unless you add it to the head of your document as apposed to the stylesheet. I add hubspot's preview domain, staging domain, and the domain of the site I am working on to the permissions.

 

Need help? Hire Us Here

MFrankJohnson
Thought Leader

Updating Font on Website

_hubspot-button-accept-as-solution-gif-v00.gif

Does this post help you? If so, then help others by accepting it as a 'solution' (HubSpot word).

 

Q: How do I implement a custom font on HubSpot?

 

Short A: - see How do I implement a custom font on HubSpot?

 

Longer A:

Incidentally, neither the original Myriad Pro or Calibri are web fonts (by original design). Maybe you can find their web counterparts from font vendors online. However, there will be differences from the originals.

 

That being said, it's not clear how/why we're attempting to include fonts that (by your own words) aren't part of the client's style guide. Probably want to get that addition/change approved before you have a font-tastrophe.

 

Does that help answer your question? If so, remember to accept this 'solution'.

Best,
Frank

 


Please add @MFrankJohnson to your message if you'd like me to reply.

hubspot-solutions-signature-mfrankjohnson-v03.png

 

www.MFrankJohnson.com

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Upvotes
DanielHird
Participant

Updating Font on Website

@MFrankJohnson 

 

New to HubSpot and the whole CSS thing, but looking to use Segoe Print font on a landing page. A quick Google and I can't establish (having read your response below) if that Segoe Print is a web font or not?

 

Presumably if it's not then I'd need to find a similar font? I assume if I was to use a non-web font then it wouldn't display properly universally?

 

Any help will be gratefully appreciated.

 

Cheers,
Dan

0 Upvotes
ErinK
Participant

Updating Font on Website

@MFrankJohnson see my response. Forgot to tag you thanks!
ErinK
Participant

Updating Font on Website

Hey so I think I was confusing. The font on their website is not the front in their brand guide (myriad pro and calibri) I am looking for the best way to incorporate/update their font to the fonts in their brand guide.
0 Upvotes