René's URL Explorer Experiment


Title: Introduction to variable fonts on the web  |  Articles  |  web.dev

Open Graph Title: Introduction to variable fonts on the web  |  Articles  |  web.dev

Description: How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.

Open Graph Description: How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.

Opengraph URL: https://web.dev/articles/variable-fonts

direct link

Domain: web.dev


Hey, it has json ld scripts:
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "dateModified": "2018-02-19",
    "headline": "Introduction to variable fonts on the web"
  }
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "Articles",
      "item": "https://web.dev/articles"
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "Introduction to variable fonts on the web",
      "item": "https://web.dev/articles/variable-fonts"
    }]
  }
  

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:localeen

Links:

Skip to main content https://web.dev/articles/variable-fonts#main-content
https://web.dev/
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Articles https://web.dev/articles
https://web.dev/
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Read the announcementhttps://goo.gle/mwg-stable
Home https://web.dev/
Articles https://web.dev/articles
X https://twitter.com/davelab6
GitHub https://github.com/davelab6
X https://twitter.com/mustafa_x
GitHub https://github.com/mustafa-x
Homepage https://www.designtoday.info/
X https://twitter.com/pixelambacht
GitHub https://github.com/roeln
Homepage https://pixelambacht.nl/
GitHub https://github.com/tomayac
LinkedIn https://www.linkedin.com/in/thomassteinerlinkedin
Mastodon https://toot.cafe/@tomayac
Bluesky https://bsky.app/profile/tomayac.com
Homepage https://blog.tomayac.com/
Can I use variable fonts?https://caniuse.com/#feat=variable-fonts
Fallbackshttps://web.dev/articles/variable-fonts#fallbacks
FOIT and FOUThttps://www.zachleat.com/web/fout-vs-foit/
Roboto Flexhttps://github.com/TypeNetwork/Roboto-Flex
registered axeshttps://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#registered-axis-tags
Wakamai Fonduehttps://wakamaifondue.com
View this example om CodePen.https://codepen.io/mandymichael/pen/YYaWop
Decovarhttps://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow
animation example on Axis Praxishttps://www.axis-praxis.org/specimens/zycon
Aniconshttps://typogram.github.io/Anicons
Roboto Flexhttps://github.com/TypeNetwork/Roboto-Flex
Amstelvarhttps://github.com/TypeNetwork/Amstelvar
future syntaxhttps://www.w3.org/TR/css-fonts-4/#font-face-src-parsing
still being worked outhttps://github.com/w3c/csswg-drafts/issues/3125
Try it yourself on Codepenhttps://codepen.io/RoelN/pen/PoPvdeV
variable fontshttps://fonts.google.com/?vfonly=true
manually composehttps://developers.google.com/fonts/docs/css2
variable fonts overviewhttps://fonts.google.com/variablefonts
Google Variable Fonts Linkshttps://github.com/RoelN/google-variable-fonts-links
Fixing variable font inheritancehttps://pixelambacht.nl/2019/fixing-variable-font-inheritance/
Monotypehttps://medium.com/@monotype/part-2-from-truetype-gx-to-variable-fonts-4c28b16997c3
Dinamohttps://abcdinamo.com/news/using-variable-fonts-on-the-web
throttle or debouncehttps://css-tricks.com/debouncing-throttling-explained-examples/
preconnecthttps://web.dev/articles/preconnect-and-dns-prefetch
The Fastest Google Fontshttps://csswizardry.com/2020/05/the-fastest-google-fonts/
support variable fontshttps://caniuse.com/#feat=variable-fonts
oldschool hackshttps://stackoverflow.com/a/20541859/6255000
Mustafa Kurtulduhttps://twitter.com/mustafa_x
Roel Nieskenshttps://twitter.com/PixelAmbacht
Kabisahttps://kabisa.nl
Dave Crosslandhttps://twitter.com/davelab6
David Berlowhttps://twitter.com/dberlow
Font Bureauhttps://fontbureau.typenetwork.com/
Laurence Penneyhttps://twitter.com/lorp
axis-praxis.orghttps://axis-praxis.org
Mandy Michaelhttps://twitter.com/Mandy_Kerr
variablefonts.devhttps://variablefonts.dev
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/articles/variable-fonts

Viewport: width=device-width, initial-scale=1


URLs of crawlers that visited me.