Ec Square Sans Pro Font Work

The ultimate goal of EC Square Sans Pro font work is not to use the font "correctly" but to build a system. Here’s a modular scale you can steal:

Base size: 16px

Apply this system consistently across web, slides, and print. That is professional font work. ec square sans pro font work

@font-face 
  font-family: 'EC Square Sans Pro';
  src: url('fonts/ECSquareSansPro-Regular.woff2') format('woff2'),
       url('fonts/ECSquareSansPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
body 
  font-family: 'EC Square Sans Pro', 'Helvetica Neue', sans-serif;

Note: Web use requires a web license (EOT/WOFF/WOFF2) – do not convert desktop fonts without permission.

@font-face 
  font-family: 'EC Square Sans Pro';
  src: url('fonts/ecsquare-sans-pro-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
body 
font-family: 'EC Square Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem; /* 16px base */
line-height: 1.45;
letter-spacing: 0.01em;
 The ultimate goal of EC Square Sans Pro
h1 
font-weight: 700;
font-size: 3rem;
letter-spacing: -0.02em;
line-height: 1.1;

If you are a developer looking to use this font on a website, you cannot simply "install" it. You must host the web font files.

Step 1: Host the files Upload the .woff2 and .woff files to your server (or use Adobe Fonts/Typekit if you have a subscription). Apply this system consistently across web, slides, and print

Step 2: CSS @font-face Add this code to your CSS stylesheet to define the font:

@font-face 
    font-family: 'EC Square Sans Pro';
    src: url('path-to-fonts/ECSquareSansPro-Regular.woff2') format('woff2'),
         url('path-to-fonts/ECSquareSansPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
/* To use it on an element */
h1 
    font-family: 'EC Square Sans Pro', Arial, sans-serif;
    font-weight: 700; /* If you have the Bold weight */