Skip to main content

FluentCommunity

#Feature Request

Fonts & Icons

Not every user is in their 20's with perfect vision. It would make things a lot better if community fonts could be chosen in terms of font, size and colour.

Also size editing on the menu item icons which at present are tiny.

This would enable the community to be consistent with the rest of a site and enable more user friendly sizes and colours to be used.

  • 4 likes
  • 8 comments

Paul Hopkins

I’ve been able to fully customise my fonts and their sizes. I just use fluent snippets to hold the CSS and that way it does not get overwritten when the plugin is updated. If anyone wants to see the CSS just say and I will put it here. I have had no problem with it on updates.

Colin Stevens

Paul Hopkins that would be fantastic. Didn’t know about the snippets option! After font adjustments I Just need to do the same for the micro menu icons to increase their size.

arjun arjun

Paul Hopkins could you please provide us with the css! Thank you in advance.

Paul Hopkins

arjun arjun Colin Stevens I am away from my desk at the moments, but I will try and show you from my iPhone.

I am using fluentsnippets plugin which is free. I use two snippets for custom css. One is for customising the fluent community pages, the other is for my other pages which I bring in from Wordpress using the theme compatibility feature. For the style to be consistent you need the same css in both.

The first uses the php code snippet option within fluentsnippets

add_action('fluent_community/portal_head', function() {
    ?>
<style>

/* attempt at fonts */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    body * {
    font-family: "Poppins" !important;    
    //font-size: 100% !important;
    font-weight:400 !important;
    }


</style>
 <?php
});

I am using it to make Poppins the font for the whole site and the font weight 400 for the whole site. You could just this to whatever you went and target h1,h2 etc specifically if you want to give them different colours etc.

the second is identical to the above except it is in a pure css snippet as provided by fluentsnippets and is follows…

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    body * {
    font-family: "Poppins" !important;  
    //font-size:100% !important;
    font-weight:400 !important;


    }

I hope that helps. You obviously need a basic understanding of CSS to understand what is happening

Hope that helps.

arjun arjun

Paul Hopkins Thank you so much Paul for this kind act ❤️

Colin Stevens

Paul Hopkins thank you for this. Hugely helpful and kind of you. My apologies too for the delay in replying but I was visiting my big brother who has thankfully come through major prostate surgery. I'll put your snippet to good use - easier for me as Poppins is my core font too!

Paul Hopkins

Colin Stevens good news about your brother. Pleased for you both :-)

Thomas

Paul Hopkins Using the universal selector * in Elementor (or any page builder) forces every element, including icon fonts, buttons, checkboxes, and special UI elements, to inherit your font this "breaking" certain elementor icons and replacing with a blank rectangle.

I have yet to figure out a workaround that encompasses all of fluents text using CSS alone.