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”.