Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <!-- MDC Web -->
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet" />
</head>

<body class="mdc-typography">

  <h1 id="title" class="mdc-typography--headline1">Fonts – a dish best served variable</h1>
  <p class="mdc-typography--body1">A beta version of the API is now available at <code>fonts.googleapis.com/css2</code>. The new API will allow variable fonts’ full potential to be realized.</p>
  
  <h2 id="feedback" class="mdc-typography--headline2">Feedback</h2>
  <p class="mdc-typography--body1">We’d love to hear from you. Tweet us <a href="https://twitter.com/googlefonts">@googlefonts</a> or reach out on our <a href="https://github.com/google/fonts/">GitHub</a>.</p>
  
  <h2 id="disclaimer" class="mdc-typography--headline2">Disclaimer</h2>
  <p class="mdc-typography--body1">This version of the API isn’t completely stable. It’s best for experimental work while we document the new endpoint.</p>
  
  <h2 id="syntax" class="mdc-typography--headline2">Syntax</h2>
  <p class="mdc-typography--body1">The new endpoint is very strict about accepting requests.
  <ul>
    <li>List axes alphabetically</li>
    <li>Axis value groups (i.e. tuples) need to be sorted numerically</li>
    <li>Tuples can’t overlap or touch (e.g. wght 400..500 and 500..600)</li>
  </ul>
  
  <h3 id="requests" class="mdc-typography--headline3">Sample requests</h3>
  <div class="mdc-data-table">
    <table class="mdc-data-table__table sample-requests" aria-label="Sample requests">
      <thead>
        <tr class="mdc-data-table__header-row">
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Font(s)</th>
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Request</th>
        </tr>
      </thead>
      <tbody class="mdc-data-table__content">
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Roboto (default)</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Roboto</td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Roboto Bold</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Roboto:wght@700</td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Roboto Regular & Bold</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Roboto:wght@400;700</td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Roboto Bold & Bold Italic</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700</td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Crimson Pro [wght 200-900]</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900</td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Crimson Pro Italic [wght 200-900]</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900</td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Crimson Pro Bold Italic & [wght 200-900]</td>
          <td class="mdc-data-table__cell">https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h2 id="fonts" class="mdc-typography--headline2">Available variable fonts</h2>
  <p class="mdc-typography--body1">Updated August 28, 2019</p>
  
  <div class="mdc-data-table vf-table">
    <table class="mdc-data-table__table" aria-label="Variable Font offerings">
      <thead>
        <tr class="mdc-data-table__header-row">
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Family</th>
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Style</th>
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Axis</th>
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Min</th>
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Max</th>
          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Demo</th>
        </tr>
      </thead>
      <tbody class="mdc-data-table__content">
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Comfortaa</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">300</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Crimson Pro</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">200</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">900</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Crimson Pro</td>
          <td class="mdc-data-table__cell">italic</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">200</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">900</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Dosis</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">200</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">800</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Fira Code</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">300</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Hepta Slab</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">1</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">900</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Kreon</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">300</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Literata</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">400</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Literata</td>
          <td class="mdc-data-table__cell">italic</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">400</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Markazi Text</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">400</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Oswald</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">200</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
        <tr class="mdc-data-table__row">
          <td class="mdc-data-table__cell">Quicksand</td>
          <td class="mdc-data-table__cell">normal</td>
          <td class="mdc-data-table__cell">wght</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">300</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">700</td>
          <td class="mdc-data-table__cell demo"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <a id="bottom"></a>
</body>

              
            
!

CSS

              
                body {
  font-family: Roboto;
  font-synthesis: none;
  padding: 0 1em 1em;
}

code {
  font-family: Roboto Mono;
}

.vf-table .demo {
  min-width: 25em;
  font-size: 2.625em;
}
.vf-table .demo::before {
  content: 'Lorem ipsum';
}

              
            
!

JS

              
                function getAxisSpec(style, axis, min, max) {
  if (style === 'normal') {
    return `${axis}@${min}..${max}`;
  }
  if ('ital' < axis) {
    return `ital,${axis}@1,${min}..${max}`;
  }
  return `${axis},ital@${min}..${max},1`;
}

function loadFont(family, style, axis, min, max) {
  const axisSpec = getAxisSpec(style, axis, min, max);

  const linkEl = document.createElement('link');
  linkEl.rel = 'stylesheet';
  linkEl.href = `https://fonts.googleapis.com/css2?family=${family}:${axisSpec}`;
  document.getElementsByTagName('head')[0].appendChild(linkEl);
}

function getCssProperties(axis, value) {
  if (axis === 'wght') {
    return `font-weight: ${value};`
  }
  return '';
}

function buildAnimation(family, style, axis, min, max) {
  const animName = family.toLowerCase().replace(' ', '') + style + axis + min + 'to' + max;
  const minCssProperties = getCssProperties(axis, min);
  const maxCssProperties = getCssProperties(axis, max);

  const styleEl = document.createElement('style');
  styleEl.type = 'text/css';;
  styleEl.innerHTML = `
@keyframes ${animName} {
0%   {${minCssProperties}}
50%  {${maxCssProperties}}
100% {${minCssProperties}}
}`;
  document.getElementsByTagName('head')[0].appendChild(styleEl);

  return animName;
}

function linkifyFamily(familyEl) {
  const family = familyEl.textContent;
  familyEl.innerHTML = `<a href="https://fonts.google.com/specimen/${family}" target="_blank">${family}</a>`;
}

function init() {
  document.querySelectorAll('.sample-requests tbody tr').forEach(row => {
    const requestEl = row.children[1];
    const request = requestEl.textContent;
    console.log(requestEl);
    requestEl.innerHTML = `<a href="${request}">${request}</a>`;
  });
  
  document.querySelectorAll('.vf-table tbody tr').forEach(row => {
    const family = row.children[0].textContent;
    const style = row.children[1].textContent.toLowerCase();
    const axis = row.children[2].textContent;
    const min = parseInt(row.children[3].textContent);
    const max = parseInt(row.children[4].textContent);
    const demoElement = row.children[5];
    const animName = buildAnimation(family, style, axis, min, max);
    demoElement.style.fontFamily = family;
    demoElement.style.fontStyle = style;
    demoElement.style.animation = `${animName} 5s infinite`;
    loadFont(family, style, axis, min, max);
    linkifyFamily(row.children[0]);
  });
}

init();



// AUTO-SCROLL ANIMATION

const frames = [
  {
    target: document.getElementById('title'),
    delay: 3000,
  },
  // {
  //   target: document.getElementById('feedback'),
  //   delay: 1000,
  // },
  // {
  //   target: document.getElementById('disclaimer'),
  //   delay: 000,
  // },
  // {
  //   target: document.getElementById('syntax'),
  //   delay: 3000,
  // },
  {
    target: document.getElementById('requests'),
    delay: 3000,
  },
  // {
  //   target: document.getElementById('fonts'),
  //   delay: 2000,
  // },
  {
    target: document.getElementById('bottom'),
    delay: 5000,
  },
]

function scrollAnim(i) {
  const frame = frames[i];
  frame.target.scrollIntoView({behavior:'smooth'});
  setTimeout(() => scrollAnim((i+1)%frames.length), frame.delay);
}

// scrollAnim(0);

              
            
!
999px

Console