Skip to content

Custom Fonts: Add a Google Font to Your Site

CrowdFiber supports adding custom fonts to match your brand. This article covers using google fonts for the purpose but any font can be used as long as the server hosting the font is configured correctly.

Step 1: Gather the needed information

  1. Go to https://fonts.google.com/, locate and select the desired font.

    • A search bar at the top of the screen and a left-hand side panel for filters provides easy searchability.

  2. Select Get font to the right of the font name.

    a7939079--cfdoc--screen_shot_2018_02_08_at_1_26_50_am.png

    custom_fonts(1).png

  3. Select < > Get embed code on the top right of the page.

    custom_fonts(2).png

  4. If you'd like to style your selected font, you may do so as shown below.

    fontsgif.gif

  5. Select the @IMPORT tab and copy only the import statement from the example.

    Paste this into a blank Notepad file or another text editor.

    custom_fonts(4).png

  6. Select the font-family from below the import statement (shown above).

    Paste it into the same text document.

Step 2: Prepare the custom CSS

This part is a bit technical, but we will walk you through step-by-step and provide an example.  You will need to prepare a simple CSS statement to override the default provided by CrowdFiber.

Follow the steps below:

  1. Place the following text at the top of the CSS file for tracking custom changes.

    / Customer Font Override /

  2. Now place the import statement from Google on the next line. Do not modify this line in any way.

    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,98.9,100..900;1,98.9,100..900&display=swap');

  3. Next, write a simple statement to target the elements within CrowdFiber. We will need to target body and h 1-5 If you chose you may target different fonts and weights as the defaults here.

    body, h1,h2,h3,h4,h5 { < Insert Google Font-family statement >}

  4. Now replace < Google Font-family statement > with the font-family snippet provided by Google

    font-family: "Roboto", sans-serif;

  5. Now you should have a text file that looks like this (ex Roboto Sans font):

    / Customer Font Override /

    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,98.9,100..900;1,98.9,100..900&display=swap'); body, h1, h2, h3, h4, h5 {

    font-family: "Roboto", sans-serif;

    }

Step 3: Add the custom CSS to CrowdFiber

You will need to be a Site Admin user in order to update the stylesheet.

  1. Go to your CrowdFiber admin dashboard.

  2. Click Settings and then Themes on the menu on the left.

    custom_fonts(5).png

  3. Find CrowdFiber Current Frontend Stylesheet and select Edit Theme

    custom_fonts(6).png

  4. Click custom.css from the menu on the left in the theme editor.

    custom_fonts(7).png

  5. On the right, an editor will show up. Look at the very top of the file for the line -

    / CrowdFiber Provider Style Overrides /

  6. Insert the text from the above steps directly below this top line

  7. Your final file should look like the following:

    custom_fonts(8).png

  8. Click Save. The font will be applied immediately to the CrowdFiber site.