How To Configure Fonts

Hi guys, 

I noticed in this article it is not clear or does not mention how to update the fonts (community-wide) if you are using a custom font according to our brand guidelines. Please can you explain how this can be done as we need to ensure our own custom font is used on our Community platform. 

Emil

Thanks, Emil! we have updated the article and added a section “How to use your company custom font” - let us know if you have any questions.

Hi @Frank - We are trying to import a style sheet via custom CSS with the @import method you described but are seeing an error. Can you help? We have also tried the @font-face method but it did not apply the font as expected. 

Howdy @alexandra.culler !

I think you’ve got malformed code there! Could you try this instead?

@import url("insert URL here");

Just that by itself might work a bit better!

So as another example, which I think works as you’d expect…

@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
}

Would load up the Open Sans font from Google Fonts and set that for the body text. I hope this helps!

Hi @Blastoise186 ,

I think we are getting this error because we are using HTML tags within a CSS section:
 

It would make sense to have that type of tag within the <header> since it can take both HTML and CSS but unfortunately that does not work either.

This is a set of fonts that has been purchased through adobe and comes with instructions mentioning to reference the fonts from within the header and then reference the font changes accordingly via CSS:
 

I had copied the link above and placed it within our custom header and then updated the CSS with the text below:

.h1 .h2 .h3 .h4 .h5 .p .a {
 font-family: myriad-pro, sans-serif; 
}

Sadly, this also didn’t work. 

I had also removed the custom CSS shown above and simply typed the fonts within the fonts section and still have not seen any change in our fonts.

I also just tried the one you mentioned above:
@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {

font-family: 'Open Sans', sans-serif;

}

and still no prevail.

Do you know a better way of going about this implementation?

Ahh ok. This might be fun. You can’t throw HTML into Custom CSS. Time for some hacks.

@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
}

.h1 .h2 .h3 .h4 .h5 .p .a {
 font-family: Open Sans, sans-serif; 
}

For the Google one, or in your case…

@import url(//use.typekit.net/inserttokenhere.css);

body {
  font-family: 'myriad-pro', sans-serif;
}

.h1 .h2 .h3 .h4 .h5 .p .a {
 font-family: myriad-pro, sans-serif; 
}

Could you try that @alexandra.culler ?

@Blastoise186 - thank you very much for the super fast answer :). We were trying to use the code provided by Frank in the initial post which is why we had HTML and CSS together.

@anthony.hopkins we can give this a try! Fingers crossed :)

No worries.

It’s kinda tricky when you’ve got these weird cases like Adobe Fonts! It’s also been a while since I last messed with CSS trickery like this, so I’m trying to recall how I learnt it.

I’ve worked it out at last. Custom CSS isn’t required. You might want to undo everything so far, to clean it all up and go back to how it was.

@alexandra.culler Try doing the Google Fonts method Frank documented, but replace the Google Fonts references with the ones you want instead. I bet that might work a bit better!

If that still doesn’t work out, then this is a real puzzle. I can’t access any Control environments myself, so I’m limited to what’s documented.

After a LOT more fiddling though, I got this to work in a simulator as an example. This exact snippet did the trick for Google Fonts at least!

@import url(//fonts.googleapis.com/css?family=PT+Sans);

body {
  font-family: 'PT Sans', sans-serif;
}

.h1 .h2 .h3 .h4 .h5 .p .a {
 font-family: PT Sans, sans-serif; 
}
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}