.dev
Partner Dashboard

Font Face ​

Last updated View as Markdown

Returns the @font-face rules that load a font from Google. Put the result in a {% style %} tag or a <style> element. A system font returns nothing.

Parameters ​

  • font_display: the font-display value, for example swap. It is not set by default.

Example ​

liquid
{% style %}
  {{ settings.heading_font | font_face: font_display: 'swap' }}
{% endstyle %}

Output

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/playfairdisplay/...woff2) format('woff2'); unicode-range: U+0000-00FF, ...; }