[Template/Script]Add Google Webfonts to Font Picker

[Former Member]

switched codes, thank you! =)

[Former Member]

Apr 20, 2013 0:33:31 GMT -8 Chris said:

Summary:
If you use Google's Webfonts to host custom fonts for your V5 forum then this template modification will allow those fonts to appear in the font picker on both the Preview and BBCode tabs of the WYSIWYG editor.

I just took a look, and it seems that you are not able to upload to Google Fonts. The first post is a bit misleading, saying: to host custom fonts.

[Hernandez]

Nice One. I am using in It in my Forums
Thank You

[Chris]

Jan 18, 2015 21:05:01 GMT -8 @burkeknight said:

Apr 20, 2013 0:33:31 GMT -8 Chris said:

Summary:
If you use Google's Webfonts to host custom fonts for your V5 forum then this template modification will allow those fonts to appear in the font picker on both the Preview and BBCode tabs of the WYSIWYG editor.

I just took a look, and it seems that you are not able to upload to Google Fonts. The first post is a bit misleading, saying: to host custom fonts.

Google hosts thousands of fonts for everyone to use and this script is for those who choose to use Google to host their webfonts. If you use another website to host your fonts or even host them yourself then this script would not be for you (although a small tweak could make it work for other hosts as well).
I don't believe I ever mentioned uploading your own fonts to Google anywhere in this thread since Google has never allowed that. You can submit a font for review and Google will check the licenses as well as other factors but there is no guarantee they will use it. This thread is almost two years old and nobody has ever interpreted that line quite the way you just did.

[Former Member]

Chris, to be exact, the only way I found this thread, and saw that, is due to someone else seeing it that way. Being that it does say, to host custom fonts, instead of saying, using custom fonts hosted at Google webfonts, my post is more telling how it could be seen that way.

I never really planned on switching fonts, however, I may decide to, on one of my sites.

[aRMY83]

Hello Chris

Just now implementing this and by far this is one nice template/script.

Thanks much!

[aRMY83]

Hello again Chris

Since I'm now with forums.net and it uses a secured https:// link, my google font code:

<link href='http://fonts.googleapis.com/css?family=Pinyon+Script|Vidaloka|Cardo|Special+Elite' rel='stylesheet' type='text/css'>

will not work. However, I found a workaround to this by removing the (http:) protocol from the URL and let the browser determine it by modifying the above code to this:

<link href="//fonts.googleapis.com/css?family=Pinyon+Script|Vidaloka|Cardo|Special+Elite" rel="stylesheet" type="text/css">

I replaced the first code ' (Apostrophes or Single Quotes) with these " (Quote, Quotation mark, or Inverted commas) in the second code above and now working just fine.

If there is another way of doing this, please advise.

[Chris]

I'm sure Google serves the fonts both with SSL and without to prevent getting that scary "mixed content..." warning from the browser but dropping the protocol as you have done allows the browser to make the choice of which protocol to use (easiest way). The code however doesn't really care which protocol is being used since it is only looking for the hostname "fonts.googleapis.com" to identify potential candidates. If the font fails to load due to mismatched protocols then this code has no control over that, that would need to be corrected before continuing.

I'm not sure why switching from single quote to double quote would have been necessary since they are both valid ways of delimiting an attribute in html. Was there was some conflict with placing it in the wrapper using single quotes?

[aRMY83]

Thanks for the information Chris and I don't know why it's not working using the single quote and as stated, it works just fine using the double quote.

Single quote code:

<link href='http://fonts.googleapis.com/css?family=Poiret+One|Shadows+Into+Light|Pacifico|Dancing+Script|Orbitron|Playball|Pinyon+Script|Droid+Sans+Mono|Vidaloka|Cardo|Indie+Flower|Kaushan+Script|Covered+By+Your+Grace|Cookie|Tangerine|Special+Elite|Fontdiner+Swanky' rel='stylesheet' type='text/css'>

Image results:



Double quote code:

<link href="//fonts.googleapis.com/css?family=Poiret+One|Shadows+Into+Light|Pacifico|Dancing+Script|Orbitron|Playball|Pinyon+Script|Droid+Sans+Mono|Vidaloka|Cardo|Indie+Flower|Kaushan+Script|Covered+By+Your+Grace|Cookie|Tangerine|Special+Elite|Fontdiner+Swanky" rel="stylesheet" type="text/css">

Image results:



I placed both codes, one at a time above:

$[head]

per instructions.

Example: (double quote)

<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
<link href="//fonts.googleapis.com/css?family=Poiret+One|Shadows+Into+Light|Pacifico|Dancing+Script|Orbitron|Playball|Pinyon+Script|Droid+Sans+Mono|Vidaloka|Cardo|Indie+Flower|Kaushan+Script|Covered+By+Your+Grace|Cookie|Tangerine|Special+Elite|Fontdiner+Swanky" rel="stylesheet" type="text/css">
$[head]

[HYSTERIA]

So I installed these codes and everything works fine expect it made the text in some places of my forum bigger? Is there a way to work around this issue? Also it seems to have messed with the text color of my code boxes somehow?

[Chris]

It sounds like you may be conflating separate issues here because from what you describe it appears to be font family issues. This script is like the contractor that you hire to add a nursery room to the house so the newborns have a place to stay and really isn't concerned if one of those kids are acting up. I'll however be glad to help you sort it out but I can do nothing without a forum link pointing to an example so I can see for myself which one of your kids are misbehaving and recommend proper disciplinary action.

[Marina]

Just a quick note of thanks. This worked fantastically.

[Marina]

Thank you so much for this extra bit of coding! I really appreciate all that you have done. I added it to the quick reply area.

[rvspeak]

Hello,

I am trying to add Roboto to my board. I did have it showing up in my drop down list for fonts, but it would not work. I have installed the plugin and followed instructions. It won't even show up in the drop down list, now.

I am not adept at CSS code and such, but if I knew the exact places where to copy and paste the codes, perhaps that would help.

Thanks.

[xx1]

I've just started to look at this thread, and I'm rather confused as to what to do at this point.

I would like to add some fonts to the drop down list (Font Face) on my forum, from the Google Fonts web page. I've selected several that I'd like to add.

Can someone tell me the code to do this, and where to put it in the Template section... step by step. I'd really appreciate it.

I'm kind of new at coding... but I'm trying to learn.