*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> On Saturday, October 11, 2014 at 12:36:04 AM UTC+3:30 [email protected] wrote: > 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, > > <https://groups.google.com/forum/#%21searchin/tiddlywiki/meta/tiddlywiki/7StDWFV9Wh0/sHFyoXTA-3oJ>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"; > } > > > > On Monday, September 23, 2013 1:08:05 PM UTC+1, David Gifford wrote: >> >> 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 >> >> >> On Sun, Sep 22, 2013 at 1:26 PM, Jeremy Ruston <[email protected]> >> wrote: >> >>> 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 >>> >>> >>> >>> On Sun, Sep 22, 2013 at 10:18 AM, PMario <[email protected]> wrote: >>> >>>> 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 >>>> >>>> -- >>>> 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 [email protected]. >>>> To post to this group, send email to [email protected]. >>>> Visit this group at http://groups.google.com/group/tiddlywiki. >>>> For more options, visit https://groups.google.com/groups/opt_out. >>>> >>> >>> >>> >>> -- >>> Jeremy Ruston >>> mailto:[email protected] >>> >>> -- >>> 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 >>> [email protected]. >>> To post to this group, send email to [email protected]. >>> 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 >> > -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8cdae20d-109e-4aba-b346-0b11bf0dd755n%40googlegroups.com.
tiddlers.json
Description: application/json
