Important

You are browsing the documentation for version 3.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

How to Change Fonts and Typography in the Storefront

Note

We assume that you are making all customizations in your custom AppBundle (placed in the folder src/AppBundle).

Note

You have to insert this code into your own styles.scss file as described in the CSS Files Structure article.

Disable and Override Fonts

To disable all Oro fonts, override the $theme-fonts variable and set map to empty.

$theme-fonts: ();

Update Fonts

To update fonts, merge $theme-fonts with your $theme-custom-fonts.

Note

You have to put the font files in your bundle public folder beforehand, e.g., Resources/public/default/fonts.

$theme-custom-fonts: (
    'main': (
        'family': 'Lato',
         'variants': (
             (
                 'path': '#{$global-url}/app/default/fonts/lato/lato-regular-webfont',
                 'weight': 400,
                 'style': normal
             ),
             (
              'path': '#{$global-url}/app/default/fonts/lato/lato-bold-webfont',
              'weight': 700,
              'style': normal
             )
         ),
    ),
    'secondary': (
        'family': 'Roboto',
        'variants': (
            (
                'path': '#{$global-url}/app/default/fonts/roboto/roboto-regular-webfont',
                'weight': 700,
                'style': normal
            )
        )
    )
);

$theme-fonts: map_merge($theme-fonts, $theme-custom-fonts);

Disable Fonts without Overriding

To disable all Oro fonts without overriding them with yours:

1. Override $theme-fonts: ();

2. Call mixin font-face() or use-font-face();

   $theme-fonts: ();
   
   // Using font-face
   @include font-face($font-family, $file-path, $font-weight, $font-style);
   
   // Using use-font-face
   $your-fonts: (
       'main': (
           'family': '...',
            'variants': (
                (
                    'path': '..',
                    'weight': normal,
                    'style': normal
                ),
                (
                 'path': '...',
                 'weight': 700,
                 'style': normal
                )
            ),
       ),
       'secondary': (
           'family': '...',
           'variants': (
               (
                   'path': '...',
                   'weight': normal,
                   'style': normal
               )
           )
       )
   );
   
   @include use-font-face($your-fonts);
   

   @mixin use-font-face call dynamically font-face with $your-fonts.

Change Font Size

To change the font size and line-height, override the following variables:

// Offsets;

// Font families
$base-font: get-font-name('main');

// Font sizes
$base-font-size: 14px;
$base-font-size--large: 16px;
$base-font-size--xs: 11px;
$base-font-size--s: 13px;
$base-font-size--m: 20px;
$base-font-size--l: 23px;
$base-font-size--xl: 26px;
$base-line-height: 1.35;

Important

In all cases above, you have to run the following console commands to publish the changes:

php bin/console cache:clear
php bin/console assets:install --symlink
php bin/console oro:assets:build