Introduction
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:
Brand Consistency
Keep your branding cohesive across all customer touchpoints.Professional Appearance
Uniform fonts give your site a polished, high-quality look.Better User Experience
Familiar typography improves readability and navigation.Stronger Brand Identity
Reinforce your brand personality with consistent visual design.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) orFn + 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
a. Chrome
b. 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-facedeclarations if your font has different weights or styles.