.png?height=120&name=Firefish_Icon_2019_RGB_72dpi%20(2).png){kind=icon}
How to update and import fonts to your website.
Firefish websites allow you to apply custom styles and fonts to your website, to keep in line with your branding. The below guide will walk you through the process to do so.
The font management page is available for superusers and marketing users only. To navigate to this page, go to website > web settings > font.
Basic / Advanced
You have the option to access a simplified version of this page by selecting the basic toggle. Alternatively, you can select the advanced toggle to apply more specific settings and values to your font and styling.
Switching between pages
When you make a change to your advanced settings and hit the save button, you will no longer be able to return to the basic settings page. You will see a warning message appear.
To return to the basic settings page, you will need to reset your styles to the default. You can do this by clicking on the link at the top of the page, or clicking 'reset theme styles' at the bottom of the page.
Font
The basic settings will give you the ability to select a font family from the drop-down, these include:
-
Arial
-
Calibri
-
Comic Sans MS
-
Courier New
-
Times New Roman
-
Verdana
-
Georgia
-
Palatino Linotype
-
Garamond
-
Trebuchet MS
-
Custom*
Custom Font
Selecting the custom option will trigger a font URL and name field to appear.
Google Font
-
Navigate to the google font page by clicking here.
-
Search and select a font you wish to use on your website.
-
Scroll down to the styles section of this page and click (+) on the style you wish to use.
-
This will trigger a side panel to appear called 'Selected Family'.
-
Within the 'use on web' section, click '@Import'.
-
Highlight the URL from the style field to match the below format, and copy and paste this in to your custom URL field in the CMS.
-
Highlight the font name from the CSS rules field to match the below format, and copy and paste this into your custom font name field in the CMS.
-
'Roboto', sans-serif
-
Base Size
You will be required to select a base size for your font, this will be the core value that drives your font sizes.
Changing this will affect the font size within the site. Changing this can impact all heading and paragraph font sizes, depending on which units are used.
You can select from the following options:
-
Tiny
-
Small
-
Normal
-
Big
-
Huge
Styles
You can click the edit button to access the size and weight values for your body and header styles.
Size
You can select the values and units for your font size.
The units available to use are listed below:
-
rem
-
em
-
%
-
px
Weight
You have the option to choose if your font will be bold or standard.
-
Normal = 400 weight
-
Bold = 700 weight
Font
The basic settings will give you the ability to select a font family from the drop-down, these include:
-
Arial
-
Calibri
-
Comic Sans MS
-
Courier New
-
Times New Roman
-
Verdana
-
Georgia
-
Palatino latui Linotype
-
Garamond
-
Trebuchet MS
-
Custom*
Custom Font
Selecting the custom option will trigger a font URL and name field to appear.
Google Font
-
Navigate to the google font page by clicking here.
-
Search and select a font you wish to use on your website.
-
Scroll down to the styles section of this page and click (+) on the style you wish to use.
-
This will trigger a side panel to appear called 'Selected Family'.
-
Within the 'use on web' section, click '@Import'.
-
Highlight the URL from the style field to match the below format, and copy and paste this into your custom URL field in the CMS.
-
Highlight the font name from the CSS rules field to match the below format, and copy and paste this into your custom font name field in the CMS.
Base Size
You will be required to select a base size for your font, this will be the core value that drives your font sizes.
Changing this will affect the font size within the site. Changing this can impact all heading and paragraph font sizes, depending on which units are used.
You can drive this by adding custom values and selecting a unit.
Styles
You can click the edit button to access the size and weight values for your body and header styles.
Size
You can select the values and units for your font size.
The units available to use are listed below:
-
rem
-
em
-
%
-
px
Weight
You have the option to choose if your font will be bold or standard.
-
Normal = 400 weight
-
Bold = 700 weight
-
Custom = Custom Value
Line Height
You can customise the line height between each of your headers and your body text.
Margin Top and Bottom
You can select the size of the margin for the top and the bottom of your text. You can select the units for these values from the below:
-
rem
-
em
-
%
-
px
Preview and Save
You can preview your font styles before you save any changes. Click the preview button at the bottom of the page to get a pop-up preview of your website. You can navigate around via your menu and see how your new font styles look with your content!
