Jump to content

- - - - -

Use webfont not in Google Fonts API or typekit

This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 adesouza


    Advanced Member

  • Members
  • 51 posts

Posted 08 April 2013 - 08:47 PM



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 { 
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


    One Smart Egg

  • Members
  • 13575 posts

Posted 08 April 2013 - 09:44 PM



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


    Advanced Member

  • Members
  • 51 posts

Posted 09 April 2013 - 12:30 AM


#4 James B†

James B


  • DMS Subscriber†
  • 5126 posts

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.