Maintaining font consistency between your store and loyalty program helps deliver a seamless and professional experience for your customers. By applying custom CSS to align your loyalty program fonts with your store’s, you can unlock several key benefits:
Why Use Custom CSS for Font Matching?
1. Brand Consistency: Keep your branding cohesive across all customer touchpoints.2. Professional Appearance: Uniform fonts give your site a polished, high-quality look.
3. Better User Experience: Familiar typography improves readability and navigation.
4. Stronger Brand Identity: Reinforce your brand personality with consistent visual design.
5. Increased Trust: A unified appearance builds credibility and trust with your audience.
Step-by-Step Guide
Step 1: Use Developer Tools to Identify Your Store Font
If you're using Chrome:● Right-click on your storefront and select Inspect
● Or press F12 (Windows/Linux) or Fn + F12 (Mac) to open DevTools
If you're using Safari:
● Open Safari > Settings (or Preferences)
● Go to the Advanced tab and enable “Show Develop menu in menu bar”
● Open your site and select Develop > Show Web Inspector
Step 2: Locate the Font Resource
● Go to the "Network" tab > Resource type selection: "Font" > Refresh the page to load font files‒ Chrome
‒ Safari
● Search for font resources: Enter the font name in the filter.
● View the font resource link and copy
Step 3: Apply the Font via Custom CSS
● Load font resources from the remote server/* You need to replace the variables.
* {{name}}: font name
* {{weight}} font weight, values: 400 | 500 | 600 | 700
* {{link}}: Resource link
* {{type}} Resource file type: https://....woff2, the type is "woff2"
*/
@font-face {
font-family: {{name}};
font-style: normal;
font-weight: {{weight}};
font-display: swap;
src: url('{{link}}') format('{{type}}');
}
● Set the font style of the specified element.
@font-face {
font-family: Futura;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.muma.world/cdn/fonts/futura/futura_n4.df36ce3d9db534a4d7947f4aa825495ed740e410.woff2?h1=bXVtYS53b3JsZA&h2=bXVtYS0yMDIxLmFjY291bnQubXlzaG9waWZ5LmNvbQ&hmac=2f2429c94172b321410790e084bfc99ab700d8a9ecc32a7826582f9988571e68") format("woff2"),
url("//www.muma.world/cdn/fonts/futura/futura_n4.6bce24beb4ba1ff4ddeb20f7cd6e2fa513a3d6ec.woff?h1=bXVtYS53b3JsZA&h2=bXVtYS0yMDIxLmFjY291bnQubXlzaG9waWZ5LmNvbQ&hmac=af9370b1fc70239b401dd4fcc35cdea9ba454db74da7f9444dd5e799d634dac9") format("woff");
}
.loloyal-primary-font {
font-family: Futura !important;
}
.loloyal-secondary-font {
font-family: Futura !important;
}
💡 Tips:
● Replace the sample URL and font name with your actual resource link and font.
● You can define multiple @font-face declarations if your font has different weights or styles.