• 0

How To Define Typekit Font As @basefontfamily In Custom Style.less


Question

Posted · Report post

Hi,

 

I'm learning to use less for website customisation.

So far I'm really enthousiastic about the idea of variables.

My custom style.less file works but one thing I don't get to work is the following:

 

I'm using Typekit for www.panassembla.com

Typekit is working when I use it in the conventional way, but when I add the Typekit font to the variables in style.less like this it doesn't load the Typekit font but shows Times New Roman:

 

@baseFontFamily:        "ff-tisa-web-pro",georgia,serif;
@baseFontWeight:        400;
 

For now I've reverted to adding the font family to classes (this works like it should) but I'd love to get this working as a variable.

Hopefully you know what I'm doing wrong.

 

Thanks, Jan

Share this post


Link to post
Share on other sites

19 answers to this question

  • 0

Posted · Report post

OK, I don't use Typekit personally but once you have created your @baseFontFamily, how are you adding it to your code ?

 

Is it like this for example,

.entry-title {
  font-family: @baseFontFamily;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny

 

I wasn't aware that you have to place the @baseFontFamily variable in the classes in your custom CSS too. I presumed that once you set a variable it would cascade through onto the whole site where basefont is used like body text etc. I thought it to work like when you set a font in Typography in Pagelines Settings.

Wouldn't that be more logical and easier? You set your font in style.less and then it is applied to all classes that use the base font? Or I'm I not getting something?

 

Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Its a matter of timing, the variables are loaded 1st, you style.less is loaded way after that.

 

So you have 2 choices.

 

  1. Use the pless_vars filter to change the constants.
  2. make a folder /less/ in your child theme and copy variables.less into it, now edit it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Simon,

 

Thanks. Working with pless_vars filter seems a more durable solution since if you guys add something to Pagelines variables.less it won't be visible in my site if I copy the variables.less file to my child theme.

I have none experience however with using filters. I have used hooks in the past and added them to my child theme's functions.php. I've looked in docs and forum, but couldn't really wrap my head around how to implement filters. Could you give me some clues?

 

Thanks, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Somthing like this then:

 

 

 

add_filter( 'pless_vars', 'my_pless_vars' );


function my_pless_vars( $vars ){
$vars['plBaseFont'] = '"ff-tisa-web-pro",georgia,serif;';
return $vars;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay thanks and I place that in functions.php?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

In a child theme or customize plugin yes, then click the flush less button.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Brilliant, gonna test it tomorrow. Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Let us know how it goes!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jenny, thanks for informing, I had to postpone trying it, urgent work came up. But I will try next week. Jan

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hi Simon_P

I'm trying to implement this but I cannot get it to work. I've copy-pasted your code directly (with another font) to my functions.php

If I edit the variables.less, it works but this function for some reason doesn't...

Thanks in advance!

 

Somthing like this then:

add_filter( 'pless_vars', 'my_pless_vars' );


function my_pless_vars( $vars ){
$vars['plBaseFont'] = '"ff-tisa-web-pro",georgia,serif;';
return $vars;
}

 

Edited by ketri

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The code you're using is for PageLines Framework, try this in DMS:

 

add_filter( 'pless_vars', 'my_pless_vars', 11, 1 );
  function my_pless_vars( $vars ){
    $vars['plBaseFont'] = '"ff-tisa-web-pro",georgia,serif;';
  return $vars;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Thank you Danny! 
It worked but there's a problem.

.btn and .modal (maybe other special cases too?) still have font-family as Open Sans although I've set the basefont and heading fonts as something else.

 

On modals.less -file on line 41 there is 

font-family: @defaultFont;

Same thing in buttons.less on line 9.

 

Am I right to assume this should actually be the @baseFontFamily not the @defaultFont right? Or actually even better if it would be removed completely and the font-family on modal would be whatever the font is on body because there's no reason for the modal to have the same font-family declared twice or another font if the @defaultFont is different than body font.

Thanks!

 

 

Edited by ketri

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Buttons have their own font-family styling which the basefont will not override. You can try using the same filter to work for both modals and buttons. Buttons use the @defaultfont variable as far as I can remember without looking.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Buttons have their own font-family styling which the basefont will not override. You can try using the same filter to work for both modals and buttons. Buttons use the @defaultfont variable as far as I can remember without looking.

http://forum.pagelines.com/topic/36379-suggestionquestion-its-difficult-to-set-the-font-families-because-modals-navs-buttons-etc-have-their-own-font-declaration/

 

I made a new topic because I think this could use some work. The problem in a nutshell is that currently I need something like 

 

#site,
label,
input,
input[type="submit"],
button,
select,
textarea,
.btn,
#site h1,
#site h2,
#site h3,
#site h4,
#site h5,
#site h6,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal {
  font-family: "proxima-nova";
}

And I feel like the fact that buttons, modals etc. have the same font declaration as the DMS controls is a bug of some sorts. 

Thanks Danny, and hopefully you'll have time to check out my other post perhaps with a developer?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Use the @defaultfont variable and the code Simon provided in the other above this should resolve your issue. Headers use the @headingsFontFamily variable.

 

You can find all these in the less directory:

 

Buttons = buttons.less

Modal = modals.less

Headers and all other typography can be found in typography.less

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Thanks again for quick reply.

The default font changes the way DMS controls in the bottom of the page look which is not something I want to do. I still feel something is off here..I mean I have:

1. font for body (good, makes sense)
2. font for headings (good, makes sense)
3. a strange font that controls how the DMS things look like AND buttons and modals. Since there is no problem with the modals and buttons just using the body-font I dont really get it...

 

I don't feel like the basic font in modals, buttons etc should in any case need a custom font, and if they do it's easy for users to specify it when needed, not override all of them 99% of the time when they would just want buttons and modals to use the normal body font. 


EXAMPLE:

A user wants to use the font Omnes Pro from typeki for headingst. He uses either 

 

add_filter( 'pless_vars', 'my_pless_vars', 11, 1 );
  function my_pless_vars( $vars ){
    $vars['plHeaderFont'] = '"omnes-pro";';
  return $vars;
}

or 

 

 h1,h2,h3,h4,h5,h6{
  font-family: "omnes-pro";
 }

But now with the current strangeness the headings in Modals are in Open Sans. You see what I mean? =) No case where a user would want the headings in a modal to be Open Sans. And if he'd change the default font then all the DMS controls are in Omnes Pro (or some strange handwritten font for example) and that's no good.

My feature request for you would be to remove these special font-additions and just have a heading font, a body font and a font form the DMS controls in the bottom of the page. It would working with fonts so much easier. I do all my projects with the lovely DMS and have to override these in all my projects

Edited by ketri

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, so we are on the same page, you're saying that if you use the @defaultfont in either CSS or a filter to change the modal/button. This code is also changing default font used on the DMS editor, is that correct ?

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

OK, so we are on the same page, you're saying that if you use the @defaultfont in either CSS or a filter to change the modal/button. This code is also changing default font used on the DMS editor, is that correct ?

 

After the weekend I'll do a quick screencast where I'll try and explain my problem as clearly as possible and we can then see what's the situation with clear understanding :)  It's always difficult to explaing these type of things via text.
There's a change I'm missing something or that I'm doing something wrong, but so far it seems like there would be great benefit in doing couple of small changes. 

 

But I have not managed to change the default font using a filter. If I understand correctly it's because in variables.less you have:

@defaultFont:         "Open Sans", "Helvetica Neue", "Helvetica", Arial, serif;
@codeFont:         Menlo, Monaco, "Courier New", monospace;


@baseFontFamily:        @plBaseFont;

Which means that I can use a filter to change the plBaseFont

 

add_filter( 'pless_vars', 'my_pless_vars', 11, 1 );
  function my_pless_vars( $vars ){
    $vars['plBaseFont'] = '"proxima-nova";';
  return $vars;
}

but as far as I understand I cannot change the defaultfont because there is no variable.

 

At least these two:

add_filter( 'pless_vars', 'my_pless_vars', 11, 1 );
  function my_pless_vars( $vars ){
    $vars['defaultFont'] = '"comic sans ms";';
  return $vars;
}
add_filter( 'pless_vars', 'my_pless_vars', 11, 1 );
  function my_pless_vars( $vars ){
    $vars['defaultfont'] = '"comic sans ms";';
  return $vars;
}

...do not work. 

But to asnwer your question: yes. if I manually edit the variables.less and change line 31 from

@defaultFont:         "Open Sans", "Helvetica Neue", "Helvetica", Arial, serif;

to for example:

@defaultFont:         "comic sans ms", "Helvetica Neue", "Helvetica", Arial, serif;

it then changes the typography in modals, buttons, inputs AND all the DMS controls!

 

So unless I'm mistaken I'd heavily suggest that in a future release of DMS we'd have

1. a font for headings

2. font for the body and all other things on a page except headings. So modals, buttons, everything would use this unless users decide otherwise for some specific reason in a specific project

3.and a default font for the DMS controls (Open Sans is a good idea and I see no reason why users should be able to change it at least without coding). 

So like I said I now need all this in my Less-file: 

 

label,
input,
input[type="submit"],
button,
select,
textarea,
.btn,
#site h1,
#site h2,
#site h3,
#site h4,
#site h5,
#site h6,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal {
font-family: "proxima-nova";
}

...just to use a typekit font because I need to override so many strange cases using the defaultfont. And even more in some cases.

But if modals and buttons etc. would just inherit the body font there would be no problems and it would be  lot easier to adjust fonts. 

Also the problem is there even without typekit if users just use Google Fonts with DMS controls. No coding at all here:

https://www.dropbox.com/s/b926rqp0w2a2b5g/Screenshot%202014-08-22%2014.11.10.png

I've used some weird typefaces to make it clear =) So in the image we have a body font which should be used everywhere besides the headings. Headings of course use the heading font. But here the button uses Open Sans which is the default font for the DMS controls. And now it takes lots of effort to override it. 

Because I use DMS in all my projects I'm very passionate about helping you improve it and at the same time help me improve my workflow on future projects.

Again, thank you very much.

 

Edited by ketri

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now