Google Fonts for TW5

[David Gifford]

Hi all

Wondering how to use a font from Google Fonts API (http://www.google.com/fonts) for TW5. I think Open Sans Condensed would be a pretty cool looking font to use for TW5.

Dave

[PMario]

On Sunday, September 22, 2013 12:57:38 AM UTC+2, David Gifford wrote:

Wondering how to use a font from Google Fonts API (http://www.google.com/fonts) for TW5. I think Open Sans Condensed would be a pretty cool looking font to use for TW5.

I think, this should be part of a theme and the theme author needs to tell the users, if you directly load from googles font repos.

I don't want to ping goolge, everytime I use TW5. I do have privacy concerns here.
If a font is installed at eg: tiddlyspace I don't have any problems ;)

-mario

[Jeremy Ruston]

As Mario suggests, there are two ways to use Google Fonts with TW5: linking or embedding. Linking carries the consequence of creating a dependency between the TiddlyWIki document and Google's online font service. Embedding is more resilient in that it works offline, but carries the disadvantage of swelling the TiddlyWiki file with the font data.

The built-in 'Starlight' theme includes an embedded Google font called Arvo:

http://www.google.com/fonts/specimen/Arvo

There are no special difficulties in doing this beyond the steps needed to create a theme plugin. Alongside the binary WOFF file containing the font one must create a .meta file that specifies the title and type of the font tiddler. You can see this in the Starlight theme:

https://github.com/Jermolene/TiddlyWiki5/tree/master/themes/tiddlywiki/starlight

Using the font requires several steps within the stylesheet. First you need this datauri macro:

\define datauri(title)
<$datauri tiddler="$title$"/>

\end


Then you need a @font-face declaration for the font. This is copied from the Google font information page:


@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  src: local("Arvo"), url(<<datauri "$:/themes/tiddlywiki/starlight/arvo.woff">>) format("woff");
}

Finally, you need to use the new font in a font-family declaration:

html body {

	font-family: "Arvo", "Times";
}

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[David Gifford]

Hi Jeremy, thanks for this, though I am not sure I understand much of this. I don't know how to create TW5 plugins or .meta files.

As a workaround until someone starts creating Google font plugins, how do I this by linking rather than embedding?

Thanks again and blessings. My flooded email account tells me that you guys have been as busy as beavers on the CLA stuff and closing issues.

Dave

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/mnC7gOHzv0Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
David Gifford
Christian Reformed World Missions, Mexico City

[Erwan Dano]

Hi all,

I am aware this is an old topic, but like any new TiddlyWiki user I like to look around and customize my TiddlyWiki.
When I wanted to add custom fonts, I landed here but I have no clue how to create a plugin (yet) even though I looked for it and no idea how and where to put that .meta file. I eventually found how to add fonts by linking here, so I'll explain how I did it :

1. Create a new tiddler named as you like with the tag $:/tags/RawMarkup and add the link to your font :
        <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

And that's pretty much it... Now you can create a new tiddler named as you like with the tag $:/tags/Stylesheet and put your css in there, for instance :

html span.tc-title{
  color: red;
  font-family: "Poiret One", "Impact";
}

[Mohammad]

Added to TW-Scripts

[Mohammad]

Embedding Google font in Tiddlywiki

While embedding google fonts through <link href works fine but the @import does not work, what is the problem?

Example: (also two tiddlers are attached to check on https://tiddlywiki.com/ just drag and drop and see how they work)

This work

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">

<div class="menlo">

This is a test of<br>

Google API Fonts

</div>

;Remarks

:Find suitable fonts from https://fonts.google.com/ and link to your Wiki

<style>

.menlo{

   font-family: "Lobster", serif;

    font-size: 36px;

line-height:48px;

    color: #C23B22;

    /* center both vertically and horizontally */

    display: flex;

    justify-content: center;

    align-items: center;

  

}

</style>

This does not work

<div class="menlo2">

This is a test of<br>

Google API Fonts

</div>

;Remarks

:Find suitable fonts from https://fonts.google.com/ and link to your Wiki

<style>

/* pacifico font */

@import url(https://fonts.googleapis.com/css?family=Pacifico);

.menlo2{

    font-family: 'Pacifico', serif;

    font-size: 36px;

line-height:48px;

    color: #C23B22;

    /* center both vertically and horizontally */

    display: flex;

    justify-content: center;

    align-items: center;

  

}

</style>

[Mohammad Rahmani]

Note that the same technique [using @import in a css file or in html5 head] works fine in an html file. See attached.

Best wishes

Mohammad

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8cdae20d-109e-4aba-b346-0b11bf0dd755n%40googlegroups.com.