Jump to content


Photo
- - - - -

Use webfont not in Google Fonts API or typekit


  • Please log in to reply
3 replies to this topic

#1 adesouza

adesouza

    Advanced Member

  • Members
  • 51 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 08 April 2013 - 08:47 PM

Hi,

 

I'm developing a child theme and want to use a font I purchased from this site:

 

Please Login or Register to see this Hidden Content

 

I added

 

<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">

 

to the header.php file that I copied over to my child theme directory.

 

and uploaded the "MyFontsWebfontsKit.css" to the appropriate location.

 

 

andInside of that .css file is:

 

/* @import must be at top of file, otherwise CSS will not work */

@import url("//hello.myfonts.net/count/268590");
 
  
@font-face {font-family: 'Baufra-Bold';src: url('webfonts/268590_0_0.eot');src: url('webfonts/268590_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/268590_0_0.woff') format('woff'),url('webfonts/268590_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'Baufra-DemiBold';src: url('webfonts/268590_1_0.eot');src: url('webfonts/268590_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/268590_1_0.woff') format('woff'),url('webfonts/268590_1_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'Baufra-Light';src: url('webfonts/268590_2_0.eot');src: url('webfonts/268590_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/268590_2_0.woff') format('woff'),url('webfonts/268590_2_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'Baufra-Medium';src: url('webfonts/268590_3_0.eot');src: url('webfonts/268590_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/268590_3_0.woff') format('woff'),url('webfonts/268590_3_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'Baufra-Regular';src: url('webfonts/268590_4_0.eot');src: url('webfonts/268590_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/268590_4_0.woff') format('woff'),url('webfonts/268590_4_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'Baufra-SemiBold';src: url('webfonts/268590_5_0.eot');src: url('webfonts/268590_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/268590_5_0.woff') format('woff'),url('webfonts/268590_5_0.ttf') format('truetype');}
 
 
And now I've gone into the child theme's style.less file and added:
 
.Baufra-Bold { 
font-family: Baufra-Bold;
font-weight: normal;
font-style: normal;
}
 
h1, h2, h3, h4, h5 { 
.Baufra-Bold;
}
 
 
but all of my headings are still in helvetica.
 
Do the settings in the Pagelines->Site Options->Typography override what I have in style.less?
 
 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 April 2013 - 09:44 PM

Hi,

 

The only safe ways to override a selection in Typography to use your premium font would be to use Cufon, if TypeKit isn't acceptable. Applying an alternative font by CSS doesn't insure that you're overriding the CSS calling for the original font as most font instructions are hardcoded to look for built-in fonts, Google Fonts, Typekit or Cufon. 

 

Cufon is free, easy and will use most any font you wish to upload.



#3 adesouza

adesouza

    Advanced Member

  • Members
  • 51 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 09 April 2013 - 12:30 AM

thanks,



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 April 2013 - 01:03 AM

@import rules in the css need to go at the very top of the custom code box, above the <body> tag.

 

We don't advise editing the core files, any scripts or code you want to add to the header you can do in the header box in Pagelines>site options>custom code>header scripts. Make sure you put the full url's in when you're adding a link in the href tag.