Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Emmanuelle Philippe 10 posts 51 karma points
    Sep 26, 2020 @ 16:28
    Emmanuelle Philippe
    0

    RTE / Formats / Google fonts

    Hi everyone

    Quick question regarding the format dropdown in RTE. Is it possible for the styles therein to use Google fonts? and if so how?

    Thanks

  • Steve Morgan 1348 posts 4457 karma points c-trib
    Sep 28, 2020 @ 11:44
    Steve Morgan
    101

    Hi David,

    Create a file in your /css/ folder - I tend to call mine RTEStyles.css and import the external font.

    Add:

    @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
    
    body {
    }
    
    /**umb_name:Heading*/
    h1 {
        color: red;
        font-family: 'Permanent Marker', cursive;
    }
    

    Then go and add this stylesheet to your RTE Data type(s).

    enter image description here

    You should now see the style sheet as an option in the formats dropdown.

    enter image description here

    Just remember to add the import to your front end styles too or it won't do anything.

  • Emmanuelle Philippe 10 posts 51 karma points
    Sep 29, 2020 @ 16:35
    Emmanuelle Philippe
    0

    Hi Steve

    Thanks for help. I had tried something similar i.e. @import but without the single quote around the font name in the CSS and that seems to have done the trick.

  • Edgar Rasquin 326 posts 925 karma points
    Jul 25, 2022 @ 12:19
    Edgar Rasquin
    0

    Hi Steve,

    do you know how to clear the cache? When I make changes to my rte.css the don't get displayed imediately because there seems to be a copy of the stylesheet in cache.

    Thanks, Edi

  • Steve Morgan 1348 posts 4457 karma points c-trib
    Jul 25, 2022 @ 13:19
    Steve Morgan
    0

    Try running dev tools in the browser.

    If you need it for other users it depends on the version of Umbraco but in v7 the hardcore way was to increment the version number in config\ClientDependency.config e.g. clientDependency version="336087072"

    And then "touch" the webconfig to make the app restart.

    Steve

  • Edgar Rasquin 326 posts 925 karma points
    Jul 25, 2022 @ 14:02
    Edgar Rasquin
    0

    Thanks Steve. Have a nice day!

Please Sign in or register to post replies

Write your reply to:

Draft