[TW5] Linking a Google Fonts API font

[David Gifford]

Hi all

If I wanted to use a Google Font for my body text by linking rather than by embedding, where would I put the following? (In classic it goes in Markup post head)

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

Dave

[Jeremy Ruston]

There's no equivalent to MarkUpPreHead etc yet.

I'd have thought that your best bet would be to embed the font. This should work:

- download the .woff file containing the font

- drag the .woff file into TW5

- rename the font tiddler as you wish

- in a stylesheet tiddler, include a fontface declaration like this (the details are provided by google in the css file you referenced)

@font-face {

  font-family: "Arvo";

  font-style: normal;

  font-weight: 400;

  src: local("Arvo"), url(<<datauri "$:/themes/tiddlywiki/starlight/arvo.woff">>) format("woff");

}

Then you can reference the font like this:

body {

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

}

Let me know how it goes,

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]

Well, my technical knowledge didn't get past the third word of your instructions. I tried downloading the Google Font, but it is not a .woff file but a .ttf file. Dragging it into TW5 did nothing. A search for "woff" on the Google Fonts help page produced no results.

--
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/HynvAJZ21_8/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 there was no working answer. I eventually found how to add fonts by linking here, so I'll explain how I did it for newcomers.

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";
}

For the record I tried to add the fonts without linking but it didn't work.
Here is what I tried :

1. I dragged the arvo.woff file into TiddlyWiki, imported it and named it "arvo.woff".
2. I created a new tiddler named "macro" with the tag $:/tags/Macro and put this code inside :
   
   \define datauri(title)
   <$datauri tiddler="$title$"/>
   \end
   
   
3. I created a new tiddler named "css" with the tag $:/tags/Stylesheet and put this code inside :
   

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

[Miguel Bartelsman]

I'm sorry for reviving this, but this solution only works as long as the tiddler that contains the font link is open.

[Birthe C]

Hi Miguel Bartelsman,

I first saw how to do it enjoying this charming Tiddlywiki http://asciifish.tiddlyspot.com/ by Alex Hough I think. It uses lots of Google fonts.


Birthe

[Miguel Bartelsman]

Well, after posting that I discovered two methods that work.

The first one uses the @import declaration that Google provides (you could also use the 'true' css by going to the link there), with the disadvantage that it depends on an outside website, kind of against TW5 philosophy.

You just create a new tiddler, with the type Stylesheet or PlainText, tag it with $:/tags/Stylesheet and paste the code google provides for fonts. Save the wiki and reload (otherwise it won't work) and voila.

The second one uses Base64 encoding. With the disadvantage that if you use too many fonts the size of the wiki will increase a lot.

Go to https://www.fontsquirrel.com/tools/webfont-generator and upload the fonts you want to use.

Select the expert option, check/uncheck w/ever you want but make sure that the 'CSS' field has 'Base64' ticked, agree to the terms and convert.

Create a new stylesheet in your wiki (as per the steps above) and paste the code of the stylesheet.css file included in the download

You may want to edit the name of the font, style and weight to suit your purposes, as the converter just uses the name of the font file and defaults to normal style and weight. The fields are already included in the code pasted, you just need to change the values.

Of course, don't forget to actually assign the font to whatever element you want the font in. 

[Alex Hough]

Hi Birthe,

I'd forgotten about that TW. 

I created it for when we were thinking about a posters for TW.

I am pleased you found it charming, that was my intention: TW is a charming thing in many ways

Best wishes

Alex

On 21 May 2016 at 13:48, Miguel Bartelsman <mbarte...@gmail.com> wrote:

Well, after posting that I discovered two methods that work.

The first one uses the @import declaration that Google provides (you could also use the 'true' css by going to the link there), with the disadvantage that it depends on an outside website, kind of against TW5 philosophy.

You just create a new tiddler, with the type Stylesheet or PlainText, tag it with $:/tags/Stylesheet and paste the code google provides for fonts. Save the wiki and reload (otherwise it won't work) and voila.

The second one uses Base64 encoding. With the disadvantage that if you use too many fonts the size of the wiki will increase a lot.

Go to https://www.fontsquirrel.com/tools/webfont-generator and upload the fonts you want to use.

Select the expert option, check/uncheck w/ever you want but make sure that the 'CSS' field has 'Base64' ticked, agree to the terms and convert.

Create a new stylesheet in your wiki (as per the steps above) and paste the code of the stylesheet.css file included in the download

On Friday, 20 May 2016 21:06:51 UTC-5, Birthe C wrote:

Hi Miguel Bartelsman,

I first saw how to do it enjoying this charming Tiddlywiki http://asciifish.tiddlyspot.com/ by Alex Hough I think. It uses lots of Google fonts.


Birthe


On Saturday, May 21, 2016 at 2:05:20 AM UTC+2, Miguel Bartelsman wrote:

I'm sorry for reviving this, but this solution only works as long as the tiddler that contains the font link is open.

--

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 https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b006302f-9a0c-49bb-a124-dcbd823a15ea%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.