How To Configure Fonts

  • 4 December 2018
  • 25 replies
  • 1670 views
Frank
Rank
Userlevel 1

Who shot the serif, or do you prefer a sans-serif typeface? Ariel, Helvetica, Georgia or Times New Roman, you can decide which font-family you want to use.

 

How to configure fonts

  1. Sign in to a community account with user role Community Manager or Administrator
  2. Click the purple Theme button and select Fonts 
  3. Provide a font-family that you want to use (e.g. font-family: "Times New Roman", Times, serif;)
  4. Click Publish

 

How to use Google Fonts

Want to make use of Google fonts in your platform, expand the spoiler and follow the steps below

  • Go to http://fonts.google.com/
  • Select fonts to use and copy the embed code from the interface using the HTML code (Standard)

f5cd1ae9-0388-4314-8722-5a0460900ab2.jpg

  • Go to Control → Customization → Third-party Scripts and paste the code in the <Head> section

a2d4f9c7-2aad-460c-a783-7cf00dd403ea.jpg

  • Go to Community → Theme → Fonts
  • Change the desired fonts as instructed by google fonts (the Specify in CSS section)

db2315c8-99bb-4a68-b3d3-35399ae05b37.jpg

  • Click Publish

 

How to use your company custom font

Want to make use of the official fonts that match your brand guidelines? For this you’ll need to inject or link to your custom fonts via the platform, there are a couple ways of doing this.

  • Include @font-face via Custom CSS
  • Include @font-face via Third-party Script
  • @import CSS stylesheet
  • Want to ensure EVERYTHING is using the same font? Use the * (anything) selector in your CSS to apply the rule to everything  
    * {
        font-family: customfont;
    }

     

 

Include @font-face via Custom CSS

  1. Sign in to a community account with user role Community Manager or Administrator
  2. Click the purple Theme button and select Custom CSS
  3. Include your custom font with the following code 
    @font-face {
      font-family: "Custom";
      src: url("https://link-to-font.com/Custom.woff");
    }
  4. Click Publish to close Custom CSS sidebar 
  5. Open Theme → Fonts
  6. Provide the font-family that you want to use (e.g. font-family: "Custom”, serif;)
  7. Click Publish

 

Include @font-face via Third-party Script

  1. Sign in to the control environment with user role Community Manager or Administrator
  2. Navigate to Customization → Third-party Scripts
  3. Include your custom font in the “Insert in <head>”  
    <style  type="text/css">
    @font-face {
      font-family: "Custom";
      src: url("https://link-to-font.com/Custom.woff");
    }
    </style>
  4. Press Save changes
  5. Sign in to a community account with user role Community Manager or Administrator
  6. Click the purple Theme button and select Fonts 
  7. Provide a CSS font-family that you want to use (e.g. font-family: "Custom”, serif;)
  8. Click Publish

 

@import CSS stylesheet

  1. Sign in to a community account with user role Community Manager or Administrator
  2. Click the purple Theme button and select Custom CSS
  3. Include a link to your CSS file with the following code 
    <style  type="text/css">
    @import url(https://link-to-css.com/stylesheet.css);
    </style>
  4. Click Publish to close Custom CSS sidebar 
  5. Open Theme → Fonts
  6. Provide the font-family that you want to use (e.g. font-family: "Custom”, serif;)
  7. Click Publish

 

More information on working with font-family https://www.w3schools.com/cssref/pr_font_font-family.asp

😌

25 replies

E
Rank

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

Yoeri
Rank
Userlevel 2
Badge +2

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.

A
Rank

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. 

 

 

Blastoise186
Rank
Badge

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!

Bug blasting absolutely everything... The Blastoise Way
Blastoise186
Rank
Badge

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!

Bug blasting absolutely everything... The Blastoise Way
A

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?

Blastoise186
Rank
Badge

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 ?

Bug blasting absolutely everything... The Blastoise Way
A
Rank

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

 

Blastoise186
Rank
Badge

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.

Bug blasting absolutely everything... The Blastoise Way
Blastoise186
Rank
Badge

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

 

Bug blasting absolutely everything... The Blastoise Way
revote
Rank
Userlevel 3
Badge +1

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?

revote
Rank
Userlevel 3
Badge +1

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?

revote
Rank
Userlevel 3
Badge +1

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.

Alistair FIeld
Rank
Userlevel 3
Badge +2

Hi @revote 

I will round up the troops to help you out!

 

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

The needs of the many, outweigh the needs of the few. 🖖
revote
Rank
Userlevel 3
Badge +1

Hi @revote 

I will round up the troops to help you out!

 

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

Ping :)

olimarrio
Rank
Userlevel 4
Badge +3

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 😁

revote
Rank
Userlevel 3
Badge +1

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

JessicaMendez
Rank

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) ?

revote
Rank
Userlevel 3
Badge +1

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 😃

JessicaMendez
Rank

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

A

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?

Yoeri
Rank
Userlevel 2
Badge +2

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.

revote
Rank
Userlevel 3
Badge +1

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

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.

 

olimarrio
Rank
Userlevel 4
Badge +3

@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. 

revote
Rank
Userlevel 3
Badge +1

@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?

Reply


Terms & ConditionsCookie settings