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
1
2
3
4
5
6
//sample.html
<span style="font-family: ABeeZee">
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.
</span>
FYI browsing into http://fonts.googleapis.com/css?family=ABeeZee link :
1
2
3
4
5
6
@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
1
2
3
4
5
6
//sample2.html
<span style="font-family: Gloria Hallelujah">
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.
</span>
request bold or italic
1
2
3
4
//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!
1
2
3
4
5
6
7
8
9
10
//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
<span style="font-family: 'GFS Neohellenic'">
Αυτό είναι ένα test!
</span>
Using Google Font to Facebook
so google give us the ref :
1
navigate there, u get :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//test.html
<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>
<span style="font-family: Roboto;font-weight: 300;font-size:15pt;">This is a light test</span>
<span style="font-family: Roboto;font-weight: 400;font-size:15pt;">This is a normal test</span>
<span style="font-family: Roboto;font-weight: 700;font-size:15pt;">This is a bold test</span>
origin - http://www.pipiscrew.com/?p=2622 g-google-fonts