Archived

This topic is now archived and is closed to further replies.

  • 0

Use webfont not in Google Fonts API or typekit

Question

Posted · Report post

Hi,

 

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

 

https://www.myfonts.com/

 

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?
 
 

 

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

thanks,

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites