Die einfachste Möglichkeit Google Web Fonts zu einzubinden geht natürlich über die API

z.B. in den header:

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">

 Und in die CSS Datei für die gewünschten Elemente:

font-family: 'Source Code Pro', monospace;

Will man aber die Seite offline bearbeiten oder um die Ladezeiten zu optimieren empfiehlt es sich die Schriftart lokal einzubinden.

Eine große Hilfe dabei ist diese Website: https://google-webfonts-helper.herokuapp.com/fonts
Ein Klick auf die Schriftart und schon wird der Cedeschnippsel für die Einbindung in das CSS angezeigt. Bei dem Pfad ist zu berücksichtigen, dass er sich auf die css Datei bzw. deren Speicherort bezieht.

z.B.

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-code-pro-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Code Pro'), local('SourceCodePro-Regular'),
       url('../fonts/source-code-pro-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-code-pro-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-code-pro-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-code-pro-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-code-pro-v6-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}