Add Google Web Fonts

[tafreeh]

Hello,

This is my first add-on. I just found out something, and thought should share it here.

What It Does?

It will add new fonts to your editor. These fonts are taken from Google Web Font (http://code.google.com/webfonts)

Step 1:

Go to Admin Cp >> Styles Manager >> Your Default Style >> Edit Styles

Add this code at the bottom of header template( or anywhere ), Just before
</div>Copy n paste the following code:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
Click save

Step 2:

Now Add this code at the bottom of additional.css.css template

h1 { font-family: 'Cantarell', arial, serif; }
h1 { font-family: 'Tangerine', arial, serif; }
h1 { font-family: 'Cardo', arial, serif; }
h1 { font-family: 'Crimson Text', arial, serif; }
h1 { font-family: 'Droid Serif', arial, serif; }
h1 { font-family: 'IM Fell English SC', arial, serif; }
h1 { font-family: 'Inconsolata', arial, serif; }
h1 { font-family: 'Josefin Sans Std Light', arial, serif; }
h1 { font-family: 'Lobster', arial, serif; }
h1 { font-family: 'Molengo', arial, serif; }
h1 { font-family: 'Neuton', arial, serif; }
h1 { font-family: 'OFL Sorts Mill Goudy TT', arial, serif; }
h1 { font-family: 'Reenie Beanie', arial, serif; }
h1 { font-family: 'Vollkorn', arial, serif; }Click Save

Step 3:

Go back to Styles Manager >> Your Default Style >> All Options
Scroll at the very bottom to Toolbar Menu Options. On Left hand side under Available Fonts..

Add This:
Cantarell
Tangerine
Cardo
Crimson Text
Droid Serif
IM Fell English SC
Inconsolata
Josefin Sans Std Light
Lobster
Molengo
Neuton
OFL Sorts Mill Goudy TT
Reenie Beanie
Vollkorn
OR if you wanna have a sorted list replace everything with this

Arial
Arial Black
Arial Narrow
Book Antiqua
Cantarell
Cardo
Century Gothic
Comic Sans MS
Courier New
Crimson Text
Droid Serif
Fixedsys
Franklin Gothic Medium
Garamond
Georgia
IM Fell English SC
Impact
Inconsolata
Josefin Sans Std Light
Lobster
Lucida Console
Lucida Sans Unicode
Microsoft Sans Serif
Molengo
Neuton
OFL Sorts Mill Goudy TT
Palatino Linotype
Reenie Beanie
System
Tahoma
Tangerine
Times New Roman
Trebuchet MS
Verdana
VollkornNow You Are Done !!!

Go ahead create new thread or reply with these new stylish fonts..

[[ I have added to my forum, If you wanna see a LIVE DEMO (http://www.tafreehmela.com/announcement/137735-new-fonts-added.html) ]]
I removed them, as it was conflicting with profile customization.



Please review following post:
https://vborg.vbsupport.ru/showpost.php?p=2139936&postcount=11
Thanks

[Maxima]

Not working 4.0.6

[sulasno]

tagged and thanks

will install it later in 4.0.7

[tafreeh]

Not working 4.0.6
How is it not working ? Can you provide more details please.
Thanks

[COL NIL SATIS]

Brilliant Tafreeh .. will add these tomorrow mate...great stuff!!! some boss fonts there..:)

tagged for now until install ...:D

[tafreeh]

Thanks for appreciation:)
Oh and just to let you know that I did not include all the fonts from that directory. I skipped 5. because I didnt find anything new in them.

[dvsDave]

You can simplify the call to Google by doing this:

To request multiple font families, separate the names with a pipe character (|).
For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

[Nocturnal222]

Looks good on one of my sub-forum :)

[paarmis.queen]

Terriblee :(
I RECOMMEND NOT TO ISTALL THIS . . .

[JAFRI]

@ Tafreeh , not work , i try vb4.0.8 & 4.0.2

[OldSchoolDSL]

Tested and working

4.1 PL2

Important:

1)
You're header should already end with </div>

Adding another one is not a good idea. Added links AFTER </div>

2) the links above in the original post have been poorly formated

..... makes for an invalid link, so doing a copy & paste of the above will do you no good.

Use the links below;

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>

[Dr.osamA]

thanxxx 7abib 2lbee

installed + 5 Stars

[OldSchoolDSL]

Anyone know how to get this to work locally?

I'm noticing my community is loading slower & finally pinned it down to this.... Last thing the browser seems to be waiting to load is fonts.googleapis.com

[JAFRI]

i try this, i have 4.0.2 & 4.1.1 not work.. change all forum , postbit font etc...

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>

[OldSchoolDSL]

Uninstalled

As nice as this was... It slowed down my community waiting for all of the Google Fonts to load.