Custom CSS | Experience Community
Skip to main content

Custom CSS

  • December 1, 2022
  • 6 replies
  • 527 views
B
Forum|alt.badge.img+1

Hello,
I'm trying implement some custom CSS using an internal font. Here is what I have so far but cannot get it to work. instead I am only seeing the default font, or Helvetica:
@font-face {
font-family: 'RocketSans', sans-serif;
src: url('https://www.rockomni.com/mcds/assets/GlobalContent/NonStockImages/Fonts/RocketSans-Regular.woff2'); 
}

h1, h2, h3, h4, h5, h6, p, div, span, a,
body {
font-family: RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif;
}


I also tried this from another example I found here:
@import url('https://www.rockomni.com/mcds/assets/GlobalContent/NonStockImages/Fonts/RocketSans-Regular.woff2');


.Skin .QuestionText {
font-family: 'RocketSans-Regular', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}


.Skin .QuestionBody {
font-family: 'RocketSans-Regular', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}

Is there another way I can write this to get the intended results?

Thank you,
Brian H.

    6 replies

    Deepak
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+46
    • Deepak
    • December 1, 2022

    https://community.qualtrics.com/XMcommunity/discussion/23208/custom-cssDownload the font library include it in Qualtrics files library pick that files URL and add that as a source to your code
    I believe Qualtrics is unable to pick that library
    Hope it helps!

      B
      Forum|alt.badge.img+1

      Thank you Deepak
      I believe I got the file into the library. I wasn't able to find an example of how to point to it from the custom CSS field.

      Deepak
      QPN Level 8 ●●●●●●●●
      Forum|alt.badge.img+46
      • Deepak
      • December 2, 2022

      https://community.qualtrics.com/XMcommunity/discussion/comment/52782#Comment_52782You can view the file and right click on download and copy the link as shown in image below. Then from the link remove the (&download=1) part. Include that as src.url.
      image.pngHope it helps!

        B
        Forum|alt.badge.img+1

        Ok, I am not great at this, so I am making sure here:
        Files Library:
        image.png
        I right click on Download after selected the above file and selected "Copy Link Address". When I pasted it in the below custom CSS I removed the "&download=1"
        Custom CSS:
        @font-face {
        font-family: "RocketSans-Regular";
        src: url("https://rocketcentral.qualtrics.com/WRQualtricsControlPanel/File.php?F=F_4ZQqSJuEzIxPcua"); 
        }

        h1, h2, h3, h4, h5, h6, p, div, span, a,
        body {
        font-family: "RocketSans-Regular";
        }
        Do I need the -Regular as it is part of the file name? Is this the "best" way to format the code?

        Thank you again!

        Deepak
        QPN Level 8 ●●●●●●●●
        Forum|alt.badge.img+46
        • Deepak
        • December 5, 2022

        https://community.qualtrics.com/XMcommunity/discussion/comment/52873#Comment_52873Yes, you are right about the configuration.

          B
          Forum|alt.badge.img+1

          Awesome, thank you. I did get this to work and can see the difference between the Default and the cutom font. Much appreciated!

          Terms & ConditionsAccessibility statement