Custom code integrations are not supported through the normal support channels. The Tovuti Support team does not correct, implement, or modify any custom code, including any code referenced in the Help Center. For assistance with custom code, please contact your Account Manager or contact the Tovuti Client Success team at clientsuccess@tovutiteam.com.
There are a variety of default fonts available out of the box. Additional custom fonts, such as Google Fonts, can be used by applying custom CSS to the logged-in and logged-out views.
Custom font styling can also be applied throughout the LMS.
This article outlines the following concepts:
- Collect Custom Font Code
- Apply Custom Font to the Logged-In View
- Apply Custom Font to the Logged-Out View
Collect Custom Font Code
Custom fonts not available through Google Fonts must be added to the LMS database by the Tovuti Client Success team. Please contact clientsuccess@tovutiteam.com to request additional fonts.
The following example shows how to use the custom Google Font, Tilt Prism.
Go to the Google Font homepage for Tilt Prism and click Select Regular.
In the font family menu (1), select @import (2), and copy the code without the <style> tags (3).
The collected code for the font above is:
@import url('https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap');
Apply a Custom Font to the Logged-In View
Different text throughout the logged-in view can be given a custom font, which is applied in the User Portals editor.
Default module title font:
Code Sample
Apply the font code to the Module Title Text (#dash_module_title_0) on a separate line. The final code is added in the Pre CSS Styling window of the CSS Styling tab of the User Portals edit view:
@import url('https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap');
#dash_module_title_0 { font-family: 'Tilt Prism', cursive; !important; }
Module title with a custom font:
Apply a Custom Font to the Logged-Out View
Custom fonts can be applied to different items within the logged-out view, which is applied in the Landing Pages editor.
Default:
Code Sample
Apply the font code to the Slide text element (.slide_text_div) on a separate line. The final code added in the Pre CSS Styling window of the CSS Styling tab:
@import url('https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap');
.slide_text_div {font-family: 'Tilt Prism', cursive; }
Header text with the custom Google Font: