Adding a Font to your store | Evolution X Help Center

Adding Custom Fonts to Your EvoX Ecommerce Store

Adding a custom font to your EvoX ecommerce store can enhance the visual appeal of your website. Follow these steps to integrate a custom font effectively:

Step 1: Choose Your Font

Begin by selecting a font you want to use. You can find a wide range of fonts on Google Fonts or other font repositories. Ensure that you have the proper licensing for the font.

Step 2: Obtain or Generate .woff File

If your font is not available as a web font (commonly .woff format), you may need to obtain the font in this format or generate it using tools like Font Squirrel's Webfont Generator. Make sure the font is properly licensed for your use.

Upload the .woff file to the media directory and get the path of the file.

Step 3: CSS Integration

Create a CSS rule to integrate the custom font. Inside your CSS file, the CSS Block in Theme Options, or a <style> block in your HTML, include the font with the @font-face rule:

@font-face {
  font-family: 'YourFontName';
  src: url('path/to/your-font.woff') format('woff');
}

The font name itself wont be added into the font dropdown in the Theme Options. So, you'll need to assign it in the css block.

h1 {  font-family: 'YourFontName', sans-serif;}

👍 Important: There may be times when you need to override the existing H1, H2, etc font by using !important.

h1 {  font-family: 'YourFontName' !important;}

FAQ

My font isn't loading?

If the font fails to load, it's likely because its being blocked by CORS and will need to be allowed by the EvoX team. You can check this by opening your Inspect element and checking the console.

My font isn't working for all text?

This may be that you need to override the existing font by using the !important declaration. There may be times when you need to override the existing H1, H2, etc font by using !important.

h1 {  font-family: 'YourFontName' !important;}

Now you have a cool new font, congrats! 🏵