Evo

Local Font

Experiment with different looks using your own font-family imports. You will need to license your fonts directly from the appropriate font foundry before use.

font-[family] experimental

Your font demonstrated here experience design made simple
for living design systems

font-name

Display Italic experience design made simple
for living design systems

font-name-italic 
<h2 class="font-name-italic">Your font demonstrated here experience design made simple for living design systems</h2>

Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-[family] class such as font-name-italic. Your local fonts may be defined in /evo_variables/_font.scss. Source fonts may be placed in the /font folder and you will need to license them directly from the approprirate font foundry before use. Note that the above sample text may not reflect your own imported fonts until you have connected it properly.

@font-face{
  font-family: 'MyWebFontName';
  src: url('../font/WebFontName.eot');
  src: local("☺"),
       url('../font/WebFontName.eot?#iefix') format('embedded-opentype'),
       url('../font/WebFontName.woff2') format('woff2'),
       url('../font/WebFontName.woff') format('woff'),
       url('../font/WebFontName.ttf') format('truetype'),
       url('../font/WebFontName.svg#webfont') format('svg');
       font-weight: normal;
       font-style: normal;
       font-display: #{$font_display};
}

.font-name               { font-family: #{$font-name}; }
.font-name-italic        { font-family: #{$font-name-italic}; }

In the _font_local.scss file, use the above code sample as your template for activating and importing fonts into the system.