Jump to content


Photo
- - - - -

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

typekit less custom fonts

  • Please log in to reply
19 replies to this topic

#1 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 11 December 2012 - 11:03 AM

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



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 December 2012 - 11:36 AM

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,

Please Login or Register to see this Hidden Content



#3 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 11 December 2012 - 11:45 AM

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



#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 11 December 2012 - 02:35 PM

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.


#5 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 11 December 2012 - 03:50 PM

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



#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 11 December 2012 - 04:45 PM

Somthing like this then:

 

 

 

Please Login or Register to see this Hidden Content



#7 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 11 December 2012 - 04:47 PM

Okay thanks and I place that in functions.php?



#8 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 11 December 2012 - 05:00 PM

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



#9 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 11 December 2012 - 05:01 PM

Brilliant, gonna test it tomorrow. Thanks!



#10 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 13 December 2012 - 03:53 PM

Let us know how it goes!



#11 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 13 December 2012 - 05:16 PM

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



#12 ketri

ketri

    Super Member

  • Members

  • 172 posts
  • Country: Country Flag

Posted 15 August 2014 - 10:27 AM

Hi @

Please Login or Register to see this Hidden Content



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:

Please Login or Register to see this Hidden Content

 


Edited by ketri, 15 August 2014 - 10:27 AM.


#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 August 2014 - 12:09 PM

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

  • ketri likes this

#14 ketri

ketri

    Super Member

  • Members

  • 172 posts
  • Country: Country Flag

Posted 21 August 2014 - 10:13 AM

Thank you @

Please Login or Register to see this Hidden Content


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 

Please Login or Register to see this Hidden Content

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, 21 August 2014 - 10:23 AM.


#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 August 2014 - 12:21 PM

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.



#16 ketri

ketri

    Super Member

  • Members

  • 172 posts
  • Country: Country Flag

Posted 21 August 2014 - 12:24 PM

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.

Please Login or Register to see this Hidden Content

 

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 

 

Please Login or Register to see this Hidden Content

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 @

Please Login or Register to see this Hidden Content

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



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 August 2014 - 12:25 PM

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



#18 ketri

ketri

    Super Member

  • Members

  • 172 posts
  • Country: Country Flag

Posted 21 August 2014 - 12:29 PM

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 

 

Please Login or Register to see this Hidden Content

or 

 

Please Login or Register to see this Hidden Content

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, 21 August 2014 - 12:38 PM.


#19 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 August 2014 - 09:05 AM

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 ?



#20 ketri

ketri

    Super Member

  • Members

  • 172 posts
  • Country: Country Flag

Posted 22 August 2014 - 11:13 AM

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:

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content

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

 

At least these two:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

...do not work. 

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

Please Login or Register to see this Hidden Content

to for example:

Please Login or Register to see this Hidden Content

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: 

 

Please Login or Register to see this Hidden Content

...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:

Please Login or Register to see this Hidden Content



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, 22 August 2014 - 11:18 AM.






Also tagged with one or more of these keywords: typekit, less, custom, fonts