Online GuideTutorials & GuidesNewsNetset PDB

Responsive Profile

BOLT-ON

This section is only visible in Nettailer StandAlone and Drive solutions.

In this section, you can create various responsive profiles. For guidance and tips on editing this area, please reach out to our support team.

Setting
What it does

Font

The name of the custom font you wish to use. Ensure the font is uploaded to the store (Settings → Files). For detailed instructions on using the font tool, please refer to Font handling

Color

Base

Background colour of the menu.

Base text

Text colour of the menu.

Button

Background colour of buttons.

Button, hover

Background colour of buttons when hovered.

Button text

Text color of buttons.

Header bar

Background colour for the header bar (the are araound the company logo, search bar and login /checkout buttons).

Header text

Text colour for tesxt in the header bar.

Footer

Background colour of the footer.

Footer text

Text colour of the footer.

Files

Logo

The image you would like to show as logotype in your site header.

Extra CSS

You may upload any additional CSS file. This will merge with the standard CSS.

Font handling

Using Web-Safe Fonts

A font will only display correctly if it exists in the user's browser, which is why it’s considered best practice to use web-safe fonts (these are typically available in all browsers).

In the Font section under [Settings → Response Profile], you can specify a priority list of fonts. If the first font in the list is unavailable in the user's browser, the next font will be attempted, and so on.

Example: 'Verdana', 'Tahoma', 'Comic Sans MS'.

Using Google Fonts

Google offers a wide range of fonts under the “Open Font License,” which can be used in Nettailer. However, Google Fonts need to be downloaded by the client browser to function properly. To ensure compatibility, you can include a web-safe font as a fallback in case the Google Font fails to load.

Example: 'Londrina Shadow', 'Verdana'.

How to Enable Google Fonts in Nettailer:

  1. Visit Google Fonts: Go to Google Fonts.

  2. Choose a Font: Browse and select the font you want to use.

  3. Select a Style: Choose the desired font style.

  4. Get the Embed Code:

    • Click on the <> Embed Code option.

    • Copy the code provided under “Embed code in the <head> of your HTML”.

  5. Create a JavaScript File:

    • Paste the embed code into a JavaScript file.

    • Ensure this JavaScript is correctly added to your Nettailer store.

  1. Copy the font-family value; see example below.

  1. Insert the copied font-family value in the responsive profile as a font and save.

Last updated