Add Google Fonts locally

This is a sample to include the core Raleway font on your template, but you could do that with whatever (Google) font.

1.) Download the desired font here: https://google-webfonts-helper.herokuapp.com/fonts

2.) integrate and upload the font within your template (in my sample i created a folder “fonts” and a subfolder with the actual font name)

3.) Add the sample code provided by the above URL, and customise it like this within your functions.php (in my case two font styles for a normal”

/**
 * add FONTS locally
 */
function custom_fonts() {
?>
<style type="text/css">
	@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin/raleway-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Raleway Light Italic'), local('Raleway-LightItalic'),
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
		@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/raleway-v12-latin/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
</style>
<?php
}
add_action( 'wp_head', 'custom_fonts' );

4.) When this is done you can use the font in the CSS / i.e. style.css like this (in my case):

body {font-family: Raleway,Verdana;}

PS: #HappyValentinesDay2019 😉