[g] Google Fonts

Costas · Jul 20, 2015

references
http://www.google.com/fonts
http://developers.google.com/fonts/docs/developer_api
http://worknotes.scripting.com/february2012/22612ByDw/listOfGoogleFonts
http://www.fonts.com/web-fonts/google

get the name of all Google Fonts

1-http://console.developers.google.com

2-
create a PRJ or enter to existing one

3-
goto API&Auth > API > Enable Web Fonts Developer API

4-
goto API&Auth > Credentials

5-
choose 'Public API Access' > Create new key > Server Key > On 'allowed IPs' modal, leave blank the textbox and press 'Create' > Your FontAPI Key is ready to use

6-
https://www.googleapis.com/webfonts/v1/webfonts?key=your.key.here.

331kb json file, structured as :

example of google font use

JavaScript:

//sample.html
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css']
</head>
<body>
	[B]
			After the last two steps, this is the easy part. TinyMCE editor now has custom classes based on active font options, and Google Fonts stylesheets are loaded, when needed.
	[/B]
</body>
</html>

FYI browsing into http://fonts.googleapis.com/css?family=ABeeZee link :

JavaScript:

@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: local('ABeeZee'), local('ABeeZee-Regular'), url(http://fonts.gstatic.com/s/abeezee/v4/JYPhMn-3Xw-JGuyB-fEdNA.ttf) format('truetype');
}

example of using multiple google fonts

JavaScript:

//sample2.html
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Sigmar+One&v2' rel='stylesheet' type='text/css']
</head>
<body>
	[B]
			After the last two steps, this is the easy part. TinyMCE editor now has custom classes based on active font options, and Google Fonts stylesheets are loaded, when needed.
	[/B]
</body>
</html>

request bold or italic

JavaScript:

//http://developers.google.com/fonts/docs/getting_started
//Request Cantarell italic and Droid Serif bold, you could use any of the following URLs:
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

request Subset(s) for lightness!

JavaScript:

//http://developers.google.com/fonts/docs/getting_started#Subsets
Some of the fonts in the Google Font Directory support multiple scripts (like Latin and Cyrillic for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.

//http://www.google.com/fonts#UsePlace:use/Collection:GFS+Neohellenic
//currently are 43 google fonts with subset greek
<link href='http://fonts.googleapis.com/css?family=GFS+Neohellenic&subset=greek' rel='stylesheet' type='text/css']

	[B]
		Αυτό είναι ένα test!
	[/B]

Using Google Font to Facebook
so google give us the ref :

JavaScript:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,greek' rel='stylesheet' type='text/css']

navigate there, u get :

JavaScript:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/I3S1wsgSg9YCurV6PUkTOaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/MP9c68IcR4UaEU8U_2cH-g.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/jSN2CGVDbcVyCnfJfjSdfKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

add these to your html style (and replace the http w/ https) aka :

JavaScript:

//test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
	@font-face {
	  font-family: 'Roboto';
	  font-style: normal;
	  font-weight: 300;
	  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/I3S1wsgSg9YCurV6PUkTOaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
	}
	@font-face {
	  font-family: 'Roboto';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/MP9c68IcR4UaEU8U_2cH-g.ttf) format('truetype');
	}
	@font-face {
	  font-family: 'Roboto';
	  font-style: normal;
	  font-weight: 700;
	  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/jSN2CGVDbcVyCnfJfjSdfKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
	}
</style>
</head>
<body>
[B]This is a light test[/B]
[B]This is a normal test[/B]
[B]This is a bold test[/B]
</body>
</html>

[g] Google Fonts

Costas

Administrator