Custom Fonts Support
In order to use custom fonts in your branding effort, you can upload the fonts into the Magentrix Asset Library or directly use their CDN links to reference them within the custom CSS area of the "Theme Builder".
Follow the steps below in order to link your custom fonts:
- Open the "Theme Builder".
- On the top left of the page, click on the "Gear" icon "Theme and Settings".
- Click on the menu dropdown icon in the heading pane to open the menu options.
- Click "CSS".
Note: Use CSS sparsely. Magentrix cannot guarantee that future upgrades will not impact heavy CSS customizations that may be applied to Magentrix user-interface or components.
Using the "CSS" dialog, you can import your custom fonts and then reference them in your CSS. For example, you can apply the font to the HTML "body" tag for the body text and copy text.
Similarly you can change the font of the heading tags as they are provided to you by the Magentrix template.
The below CSS code imports two custom fonts for copy text and headings:
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito@1&display=swap');
body { font-family: 'Raleway', sans-serif; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: 'Nunito', sans-serif; }