Difference between Google Fonts /icon and /css CDN links?

Question

This is regarding the usage of

https://fonts.googleapis.com/icon
https://fonts.googleapis.com/css

I noticed this when using the Google Material Icons CDN from Google Fonts. Some sources listed fonts.googleapis.com/css?family=Material+Icons while others listed fonts.googleapis.com/icon?family=Material+Icons. Both seem to work exactly the same. I was just wondering if anyone knew of any technical differences?

Oddly I am also able to do things like fonts.googleapis.com/icon?family=Roboto|Noto+Sans I am just curious. Thanks!

Using CSS, we can play with background position property to display only the icons we want hiding the rest from view. — Alexdieuveult

userX userX · Accepted Answer · 2020-06-12T14:32:25

As per GCP doc CSS API v2 you should be able to use other front or icon family

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Additionally, you might be noticing fonts.googleapis.com/css?family=Material+Icons and fonts.googleapis.com/icon?family=Material+Icons different source Similar to other Google Web Fonts, the correct CSS will be served to activate the 'Material Icons' font specific to the browser. An additional CSS class will be declared called .material-icons. Any element that uses this class will have the correct CSS to render these icons from the web font. you might be able to get more details on this in Material Icons Guide

Difference between Google Fonts /icon and /css CDN links?

1 Answers