Don't Miss Out! CONCEPT Premium theme - 50% OFF

Okay
  Print

HOW TO ADD CUSTOM FONT IN ELLA 6.X

If you have your own font files, then follow these steps to include the font in your theme:

1. Go to Online Store -> Theme -> Edit code

2. Assets -> upload your custom font all font type = WOFF, WOFF2

3. Create a @font-face CSS rule so that you can reference the font. Use the asset_url filter to output the URL for the font file:

@font-face {

  font-family: "Font name";

  src: url({{ [font-file-name] | asset_url }}) format("[font-format]");

}

Example:

@font-face {

    font-family: 'Neue Haas Grotesk Display Pro';

    src : loccal('Neue Haas Grotesk Display Pro 65 Medium'),

          url('Neue Haas Grotesk Display Pro 65 Medium.eot?#iefix') format('embedded-opentype'),

          url('Neue Haas Grotesk Display Pro 65 Medium.woff') format('woff'),

          url('Neue Haas Grotesk Display Pro 65 Medium.woff2') format('woff2');

  font-weight:100;

  font-style: italic;

  }

4. Assets -> base.css -> Scroll all the way to the bottom of the file, and here’s where you’ll add your code. 

5. Use custom fonts:- You’ll want to decide what html elements or classes will use these fonts. You need to define where you want the font used.

- If the font custom hasn’t displayed, you must add extra properties “!important”.