Jump to content
Sign in to follow this  
adesouza

Use webfont not in Google Fonts API or typekit

Recommended Posts

adesouza    0
adesouza

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
adesouza    0
adesouza

thanks,

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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

Sign in to follow this  

×