Inlining fonts avoids the overhead of an HTTP request, but that advantage may not outweigh the many downsides. It’ll affect your actual and perceived performance, thereby making your site load slower. It also disables font format negotiation, progressive rendering, parallel downloading, and lazy loading.

Noncompliant Code Example

@font-face {
  font-family: MyFontFamily;
  src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFhIABAAAAAAm0wAAQAAAAA...):
}

See