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;
}

I want to test our custom font, I have tried this option: Include @font-face via Custom CSS

I dont get any errors but our custom font doesnt work. Font itself works ok when I test the url (.woff file).

Any hints to test or can Insided help me? :)

Edit:

Problem solved, I accidentally tested Fonts like this and our custom font works ok:

Before this I had this kind of font family:

font-family: "Custom”, custom_font_name;

Is there something I dont understand now?

And today custom fonts doesnt work anymore, I havent done any changes.

I have tested with this font-family

font-family: "Custom”, custom_font_name;

But it doesnt work with that either. Any tips?

Body font is too small, how to adjust that? With custom CSS? Currently size is 14px and we would like to use 16px. This is matter of accessibility as well.

Hi @revote 

I will round up the troops to help you out!

@olimarrio or @leo-inspired any advice on this?

Ping :)

Hi @revote 👋,

Apologies for the delay, I’ve been out of office!

Yes this would need to be done with Custom CSS. So to increase the font size of all <p> elements that are size 14px you could add the following code:

p {
 font-size: 16px;
}

You may find that you also need to scale up other elements on the page as you’ve increased all <p> elements in the body. So you could also use similar code but instead target h1, h2, h3 etc.

For example:

h3 {
 font-size: 22px;
}

If you need any help targeting other elements that you feel need an increase in font-size, let me know or contact support@insided.com

Thanks 😁

Thanks a lot @olimarrio , seems pretty straight forward task :)

Hello inSided Community! I’m looking to change the font size across our community. Any advice or guidance on how to do this (if possible) ?

Look the Oliver’s comments above, does these suits for your need? I asked this same thing earlier 😃

@revote I missed Oliver’s response!! Thank you so much for pointing that out! Have a great rest of your day!

Hi! I’d like to upload our custom font and have been trying to use the information provided above. However, if I copy all the steps, I cannot get it to work.

I have used Transfonter to generate a @font-face, but as far as I see online I should upload it somewhere in the backend. Now it won’t link to our font, I guess because it’s only in my downloads. 

I’m very new to this, so sorry if my questions are basic. But can somebody help me? Should I upload it somewhere before linking to it, and if yes, where?

Hi @annemijn.hintzen the @font-face you generated should be uploaded and hosted on an online server, this typically is the online server where your company’s website is hosted. 

The moment the @font-face is uploaded you can follow the steps in Include @font-face via Third-party Script to load them in to your community and use them as your font.

Can I ask @olimarrio how to increase font size from the topic titles? I have tried h1/h2/h3 etc but nothing doesn´t change topic title font size.

@revote it’s likely that you will need to add !important to your CSS as your custom code is being overridden by the default styling that we apply ourselves. 

Yes, now I can adjust the font size of topic titles. Thanks a lot.

Is it possible to tweak a bit more: How can I adjust just titles of articles? Lets keep discussions as they are. Is this possible to achieve easily?