Typography

: _syntax

Main reference

Ask your question below

Can I use Google Web Fonts on Wikidot?
mattdm mattdm 19 Jan 2012 23:43

Google has a nifty API for embedding custom fonts on your web site, where the user doesn't have to have the font installed. There's a long list of nice ones to choose from. How can I include the requisite style sheet link on my wikidot page?

by mattdm mattdm , 19 Jan 2012 23:43
Re: Can I use Google Web Fonts on Wikidot?
MAX ALPIZAR MAX ALPIZAR 21 Jan 2012 05:50

You may put the code inside an [[html]] block, try pasting the block below on one of your wikidot pages:

[[html]]
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
gfont {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<gfont> Making the Web Beautiful!</gfont>
[[/html]]

I tried and it looks just the same as in Google Web Font ́s page.

by MAX ALPIZAR MAX ALPIZAR , 21 Jan 2012 05:50
Re: Can I use Google Web Fonts on Wikidot?

Nice, will use it, but with caution :-)
Maybe it would be nice if wikidot created a [[gfont family=Tangerine]] tag.


A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.

Last edited on 21 Jan 2012 08:23 by Steven Heynderickx
by Steven Heynderickx Steven Heynderickx , 21 Jan 2012 08:14
Re: Can I use Google Web Fonts on Wikidot?
Helmut_pdorf Helmut_pdorf 21 Jan 2012 08:50

I thought it would be possible to use elsewhere on my wiki a "html-block" ( or "code" block ?) to get the stylesheets from google and everwherey on my wiki I can use than the
[[span style="font-family:Tangerine;"]] ( or other fonts if I need them!)
… wherever I need it.

AS I have learned - I can use the html-block#s URL which I can get from the rendered page - open iframe only…)


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 21 Jan 2012 08:51 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 08:50
Re: Can I use Google Web Fonts on Wikidot?
Helmut_pdorf Helmut_pdorf 21 Jan 2012 09:28

This does not work in IE (8) ! ( I know it is old, but the company needs it)


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 09:28
Re: Can I use Google Web Fonts on Wikidot? YES!
Helmut_pdorf Helmut_pdorf 21 Jan 2012 09:49

Have a look on http://helmuti-pdorf.wikidot.com/style-sheets and the used code.

I have only "imported" in the module CSS the stylesheet from google…

Edit: this does not work in IE (8) … ( IE 9 I have no experience)

Edit2: This does work in FF (8) , but not on my IE (8) on "Vista" … I have no idea why.. I am sure this should work!
Windows Vista - IE Version 8.0.6001.19170 ( 256 bit version)

Edit: The "shadow" is not as expected.. ?


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 21 Jan 2012 13:20 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 09:49
Re: Can I use Google Web Fonts on Wikidot? YES!
RobElliott RobElliott 21 Jan 2012 13:20

It worked fine for me in IE8 as well as my usual Firefox, Chrome, Safari and Opera and IE9. This is it on IE8 at http://vineyard.wikidot.com/edible-plants:main

gfont-ie8.png

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 21 Jan 2012 13:20
Re: Can I use Google Web Fonts on Wikidot? YES!
Helmut_pdorf Helmut_pdorf 21 Jan 2012 13:23

Thanks, Rob, for clarification!

My friends told me that this works or them,,, but not on my system.. ?

And the shadow is not working as I want..

Edit: I have seen YOUR Page is shown correctly on my IE (8) !

Now it is interesting what I am doing wrong


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 13:23
Re: Can I use Google Web Fonts on Wikidot? YES!
Helmut_pdorf Helmut_pdorf 21 Jan 2012 13:27

Thanks Rob,
after looking at your -template I found it … a typo in my span..
But the shadow is not working as I wanted it
Is this a CSS 3 level command?


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 13:27
Re: Can I use Google Web Fonts on Wikidot? YES!
RobElliott RobElliott 21 Jan 2012 13:29

No idea, I copied it from you! A nice solution which I will use quite a lot I think because it's easier than @font-face.

Yes, the shadow is CSS3.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Last edited on 21 Jan 2012 13:30 by RobElliott
by RobElliott RobElliott , 21 Jan 2012 13:29
Re: Can I use Google Web Fonts on Wikidot? YES!
Helmut_pdorf Helmut_pdorf 21 Jan 2012 13:34

Yes, it was confusing me more than I wanted.. sorry for the work of demonstration!

And bad, the shadow is not (yet) working on my IE (8), but on FF(8) not working too!

Edit: The shadow works in the manner that the 2 px numbers are working but the color not..

I have tried it now with "text-shadow:3px 16px;" ( direction "right" and "down") looks "strange".


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 21 Jan 2012 13:36 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 13:34
Re: Can I use Google Web Fonts on Wikidot?
Helmut_pdorf Helmut_pdorf 21 Jan 2012 19:01

To give a short and clear reply:
You can use such font families on every page f your wiki with inserting a module CSS for importing the style sheet like this code:

[[module CSS]]
@import url(http://fonts.googleapis.com/css?family=Tangerine);
[[/module]]
This is a test with css-google style sheet font "Tangerine"
@@[[span style="font-family:'Tangerine', serif;font-size: 48px;"]]Making the Web Beautiful![[/span]]@@:
[[span style="font-family:'Tangerine', serif;font-size: 48px;"]]Making the Web Beautiful![[/span]]
And normal back...
and with **text-shadow: 16px 16px;**:
@@[[span style="font-family:'Tangerine', serif;font-size: 48px;text-shadow: 3px 16px;"]]Making the Web Beautiful![[/span]]@@:
[[span style="font-family:'Tangerine', serif;font-size: 48px;text-shadow:3px 16px ;"]]Making the Web Beautiful![[/span]]

You can use the imported style in all [[div style="....]] and in [[span style="...]]


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 21 Jan 2012 19:03 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 21 Jan 2012 19:01
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.

AltStyle によって変換されたページ (->オリジナル) /