Theme Next: How to use a different Google font

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Theme Next: How to use a different Google font

Post by kybernator » Thu Sep 22, 2016 2:47 pm

Hi there,

for the Next theme, I need to use a font not offered in the default options. The font is available via Google fonts, but I could just as well host it myself, if that makes things easier.
I have tried the search function, but to no avail (which could be because I am not using the right search terms, would not be the first time that this happens).
It needs to be done in the user.css, I suppose, but has anyone done that before and has a kind-of recipe?

Any advice?

User avatar
yellowled
Regular
Posts: 7020
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Theme Next: How to use a different Google font

Post by yellowled » Thu Sep 22, 2016 3:33 pm

kybernator wrote:for the Next theme, I need to use a font not offered in the default options. The font is available via Google fonts, but I could just as well host it myself, if that makes things easier.[…] It needs to be done in the user.css, I suppose
You can do that in the user.css, but I would not advise it.

In that case, you would set the theme option to not use a google webfont and add the following code to your user.css. For demonstration purposes, I'll use Droid Sans, but of course you'll have to adapt that according to the font, weights and styles you want to use.

Once you have selected a Google Font at https://fonts.google.com, you get the black collapsed window at the bottom that says “1 family selected”. There, you can customize the font selection and get your embed code. There's a tab “@IMPORT” where you'll find what you need to add to the beginning your user.css:

Code: Select all

@import 'https://fonts.googleapis.com/css?family=Droid+Sans:400,700';

body {
    font-family: 'Droid Sans', sans-serif;
}
That should work, but it's going to be slow and might have the funny side effect that at least on slow connections, you'll see the site in Helvetica first and then a noticable switch to your webfont.

The better option would be to create a copy of the Next theme and edit its index.tpl to include the webfont, but that would mean you would not get or have to backport future changes to the Next theme to your copy. (I can not foresee if Next will go through a lot of changes, sorry.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Theme Next: How to use a different Google font

Post by kybernator » Thu Sep 22, 2016 3:53 pm

Thanks a lot! Even though I am not familiar with editing .tpl, the Syntax near the beginning concerning fonts seems pretty straightforward, I will try that route and report here.

User avatar
yellowled
Regular
Posts: 7020
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Theme Next: How to use a different Google font

Post by yellowled » Thu Sep 22, 2016 4:00 pm

kybernator wrote:Even though I am not familiar with editing .tpl, the Syntax near the beginning concerning fonts seems pretty straightforward, I will try that route and report here.
Be advised that you need to make a copy of /templates/next/ (i.e. copy it to /templates/foo/ or whatever you like) and edit the index.tpl of that copy. The original in /templates/next/ will be overwritten the next time you update s9y.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Theme Next: How to use a different Google font

Post by kybernator » Thu Sep 22, 2016 4:58 pm

OK, I now have a directory Foo with all files from Next under ../templates, but when I want to choose Foo as my template, it does not show in the list...

OK, I found the solution: Edit the info.txt to reflect the new name :-)
Last edited by kybernator on Thu Sep 22, 2016 5:21 pm, edited 1 time in total.

User avatar
yellowled
Regular
Posts: 7020
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Theme Next: How to use a different Google font

Post by yellowled » Thu Sep 22, 2016 5:21 pm

kybernator wrote:OK, I now have a directory Foo with all files from Next under ../templates, but when I want to choose Foo as my template, it does not show in the list...
You need to edit /templates/foo/info.txt and change the theme name (might as well change the other info):

Code: Select all

Name: NAME
Author: Kybernator
Date: 2016-09-22
You can leave the rest of the info.txt as it is. Just a tip: you might want to use a different name that is recognizable and searcheable in lists as well as related to the project it is intended for. Not “Foo”. :)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Theme Next: How to use a different Google font

Post by kybernator » Thu Sep 22, 2016 5:21 pm

Same time again.

And no, I didn't use Foo ;-)

Edit: For those searching later: Works like a charm.

You have to edit index.tpl, config.inc.php and style.css, identify the relevant sections (which is easy enough since even I managed to do so), add the font and define an abbreviation for it, and bingo.
Last edited by kybernator on Thu Sep 22, 2016 5:53 pm, edited 1 time in total.

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Theme Next: How to use a different Google font

Post by kybernator » Thu Sep 22, 2016 5:27 pm

BTW, where ist the line "Powered by Serendipity and the Next theme?"

I would like to edit that to something like "...based on the Next theme", since I would not want my possible mistakes to reflect badly on you.

User avatar
yellowled
Regular
Posts: 7020
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Theme Next: How to use a different Google font

Post by yellowled » Thu Sep 22, 2016 8:11 pm

kybernator wrote:I would like to edit that to something like "...based on the Next theme", since I would not want my possible mistakes to reflect badly on you.
That is something that is going to change very soon, though (and does already work in 2.0.x, so you should use it.

Just change (in the index.tpl of your copy)

Code: Select all

<p lang="en">Powered by <a href="http://s9y.org">Serendipity</a> <abbr title="and">&</abbr> the <i>Next</i> theme.</p>
to

Code: Select all

<p lang="en">Powered by <a href="http://s9y.org">Serendipity</a> <abbr title="and">&</abbr> the <i>{$template}</i> theme.</p>
Magic!

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Theme Next: How to use a different Google font

Post by kybernator » Thu Sep 22, 2016 10:44 pm

Ahhh, magic!

Thanks again.

Post Reply