Loading ...

Custom fonts? | Communifire Support

Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Custom fonts?

Subscribe to RSS
  • Hi -- I have TrueType font file such as ".otf", ".ttf", is there a way to use these on my intranet site?

  • Hi Seirra,

    We can upload those fonts to your site's assets and then you can use them via CSS Overrides.

    You can send those fonts to us via attachment to this thread.

    Thanks,
    Raghav

  • I've attached the zip with the different font files (different weights included). I'd love help with the CSS overrides to get it all working. Thanks!

  • Answered

    The have been uploaded at the following location on your site:

    /Assets/custom-fonts

    Let us know if you are facing any issues further.

  • Can you provide the CSS for me to put into the CSS overrides? Thanks!

  • Hi Sierra,

    I'd like to add the CSS for the custom fonts for you and make sure they work correctly. May I edit CSS overrides on your site now?

    Grace

  • Yes

  • Answered

    Hi Sierra,

    I added the following CSS to make the custom fonts available for use in CSS.

    @font-face {
        font-family: "UnderstoodSans-Bold";
        src: url("../../custom-fonts/UnderstoodSans-Bold.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-BoldItalic";
        src: url("../../custom-fonts/UnderstoodSans-BoldItalic.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-DemiBold";
        src: url("../../custom-fonts/UnderstoodSans-DemiBold.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-DemiBoldItalic";
        src: url("../../custom-fonts/UnderstoodSans-DemiBoldItalic.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-Heavy";
        src: url("../../custom-fonts/UnderstoodSans-Heavy.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-HeavyItalic";
        src: url("../../custom-fonts/UnderstoodSans-HeavyItalic.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-Light";
        src: url("../../custom-fonts/UnderstoodSans-Light.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-LightItalic";
        src: url("../../custom-fonts/UnderstoodSans-LightItalic.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-Medium";
        src: url("../../custom-fonts/UnderstoodSans-Medium.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-MediumItalic";
        src: url("../../custom-fonts/UnderstoodSans-MediumItalic.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-Regular";
        src: url("../../custom-fonts/UnderstoodSans-Regular.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-RegularItalic";
        src: url("../../custom-fonts/UnderstoodSans-RegularItalic.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-SemiBold";
        src: url("../../custom-fonts/UnderstoodSans-SemiBold.otf") format("opentype");
    }
    
    @font-face {
        font-family: "UnderstoodSans-SemiBoldItalic";
        src: url("../../custom-fonts/UnderstoodSans-SemiBoldItalic.otf") format("opentype");
    }

    Now you can use those fonts the same way you use other fonts, using the names in font-family above. Example:

    /*Testing font*/
    .x-custom-space-media-assets .axero-activity-ticker h3 {
        font-family: "UnderstoodSans-Light";
    }

    Result:

    You can also change the font-family names if you'd like, for instance to remove dashes and add spaces between words. Just keep the src paths the same.

    Grace

Page 1 of 1 (8 items)