Custom Font In Custom Scrolling Marquee Banner

Store Design
, , ,
1

Hey,

I have added a custom scrolling marquee banner and I want to change the font to a custom font.

Code I have used is:

.custom-marquee { position: relative; width: 100vw; max-width: 100%; height: 43px; overflow-x: hidden; background:{{section.settings.colorBackground}}; color:{{section.settings.colorText}}; } .custom-marquee a { color:{{section.settings.colorText}}; } .custom-marquee .track { position: absolute; bottom: 6px; white-space: nowrap; will-change: transform; animation: marquee 10s linear infinite; } .custom-marquee .content { margin-left: 40px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-20%); } }
{%- if section.settings.text != blank -%} {%- if section.settings.link != blank -%} {%- endif -%}
{{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {{ section.settings.text | escape }} {%- if section.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
{%- if section.settings.link != blank -%} {%- endif -%} {%- endif -%}
{% schema %} { "name": "Marquee Announcement", "settings": [ { "type": "text", "id": "text", "default": "Welcome to our store", "label": "Add text to display" }, { "type": "color", "id": "colorBackground", "label": "Background color", "default": "#000" }, { "type": "color", "id": "colorText", "label": "Text color", "default": "#fff" }, { "type": "url", "id": "link", "label": "Link" } ] } {% endschema %}

WEBSITE: 4qs.uk

Password: 44444

2

Hi @visualess

You can add a font-family to this class. Set the value to your custom font. I think it should work then.

.custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 43px;
    overflow-x: hidden;
    background: #d1323e;
    color: #ffffff;
    font-family: sans-serif;
}

Hope this helps.