Jump to content


Photo
- - - - -

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

typekit less custom fonts

  • Please log in to reply
10 replies to this topic

#1 janpeeters

janpeeters

    Advocate

  • Members

  • 304 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
  • 15167 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

  • 304 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

  • 304 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

  • 304 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

  • 304 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

  • 304 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







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