Jump to content


Photo
- - - - -

Need help with adding fonts process


  • Please log in to reply
17 replies to this topic

#1 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 31 January 2014 - 10:39 PM

I have searched and found the link to the PL docs on this topic: http://docs.pageline...ng-custom-fonts

 

I think I'm really close but I seem to be missing something. Site is at http://www.coachmediateconsult.com. The Segoe script font that can be seen on most computers (since Segoe is available on PCs) displays fine (see top of the 3 boxes on the homepage or the quotes in the About sidebar, etc). Problem is, on a cellphone you do NOT see Segoe but a replacement script. I'm sure when I get this working correctly that you'll see Segoe on all devices.

 

I've uploaded the fonts we purchased to the child theme in a new folder called fonts.

 

I've added the following to the top of my CSS and have specified the fonts in the CSS.

 
/* custom fonts */
  
@font-face {font-family: 'SegoeScript';src: url(' @{plChildRoot/fonts/29B709_0_0.eot');src: url('@{plChildRoot}/fonts/29B709_0_0.eot?#iefix') format('embedded-opentype'),url('@{plChildRoot}/fonts/29B709_0_0.woff') format('woff'),url('@{plChildRoot}/fonts/29B709_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'SegoeScript-Bold';src: url('@{plChildRoot}/fonts/29B709_1_0.eot');src: url('@{plChildRoot}/fonts/29B709_1_0.eot?#iefix') format('embedded-opentype'),url('@{plChildRoot}/fonts/29B709_1_0.woff') format('woff'),url('@{plChildRoot}/fonts/29B709_1_0.ttf') format('truetype');}

.SegoeScript { 
	font-family: SegoeScript;
	font-weight: normal;
	font-style: normal;
}
.SegoeScript-Bold { 
	font-family: SegoeScript-Bold;
	font-weight: normal;
	font-style: normal;
}

Thanks for your help.

Sheila



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 February 2014 - 01:16 PM

Hi Sheila,

 

I did a quick search via Google and found that you most likely the font-family: SegoeScript; not set correctly, this information should be available from where you purchased the font.

 

When I found the font being used, the font family was set to the following:

 

font-family: 'Segoe Script';

font-family: 'Segoe Script Bold';



#3 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 February 2014 - 02:12 PM

Thanks Danny. So I changed all the Segoe Script with SegoeScript, etc. and still on my phone I do not see SegoeScript. That IS what is supposed to happen when installing a purchased font, right? I'm wondering if I have something else wrong or if this just doesn't work for phones. The script substitution is pretty ugly. Client is unhappy and I'm not sure what else to try.

 

Is there any point in putting 'SegoeScript' 'SegoeScript-Bold' in the DMS Typography section under Extra Google Fonts? I didn't think so since these are NOT Google fonts but purchased fonts. it would be a GREAT feature to have a simple way to also add purchased fonts.

 

The instructions from the folks I bought the font from say to add this to the header which I have not done:

 
Include a reference to the Kit.  
Locate the CSS file in the Kit’s main folder. 
You should place a reference to this file in the head section of your website’s HTML code. 
Make sure that the reference appears on all HTML pages of your site.

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

But I thought that the DMS tutorial instructions replaced that, right? OR do I need to do that as well or some variation of it?

 

And I went back to the DMS docs and it says:

 

Fonts not loading in iPhone or iPad

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings.

So I've pinged my host to see if that's a setting they can switch for me on my VPS. But I don't see the fonts on my Android either.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 February 2014 - 02:40 PM

Why do you keep using SegoeScript, from what Ive found that isn't correct.

 

What does the .css file contain ?



#5 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 February 2014 - 02:52 PM

I thought that's what both you and the instructions said. Once again here is what is in my DMS CSS. The fonts are in a folder called fonts in my child theme. This is the FIRST thing in my Custom CSS. I think it's the @import that may be missing....

 
/* custom fonts */
  
@font-face {
	font-family: 'SegoeScript';
	src: url(' @{plChildRoot/fonts/29B709_0_0.eot');
	src: url('@{plChildRoot}/fonts/29B709_0_0.eot?#iefix') format('embedded-opentype'),
	url('@{plChildRoot}/fonts/29B709_0_0.woff') format('woff'),
	url('@{plChildRoot}/fonts/29B709_0_0.ttf') format('truetype');}
 
  
@font-face {
	font-family: 'SegoeScript-Bold';
	src: url('@{plChildRoot}/fonts/29B709_1_0.eot');
	src: url('@{plChildRoot}/fonts/29B709_1_0.eot?#iefix') format('embedded-opentype'),
	url('@{plChildRoot}/fonts/29B709_1_0.woff') format('woff'),
	url('@{plChildRoot}/fonts/29B709_1_0.ttf') format('truetype');}

.SegoeScript { 
	font-family: SegoeScript;
	font-weight: normal;
	font-style: normal;
}
.SegoeScript-Bold { 
	font-family: SegoeScript-Bold;
	font-weight: normal;
	font-style: normal;
}

AND these are the untouched instructions from the folks I bought the fonts from. I took this and modified the paths per the DMS docs.

 
/**
 * @license
 * MyFonts Webfont Build ID 2733833, 2014-01-27T12:35:58-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Segoe Script by Ascender
 * URL: http://www.myfonts.com/fonts/ascender/segoe-script/regular/
 * 
 * Webfont: Segoe Script Bold by Ascender
 * URL: http://www.myfonts.com/fonts/ascender/segoe-script/bold/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2733833
 * Licensed pageviews: 250,000
 * Webfonts copyright: &#x00A9; 2006 Microsoft Corporation. All Rights Reserved.
 * 
 * © 2014 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/29b709");

  
@font-face {font-family: 'SegoeScript';src: url('webfonts/29B709_0_0.eot');src: url('webfonts/29B709_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/29B709_0_0.woff') format('woff'),url('webfonts/29B709_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'SegoeScript-Bold';src: url('webfonts/29B709_1_0.eot');src: url('webfonts/29B709_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/29B709_1_0.woff') format('woff'),url('webfonts/29B709_1_0.ttf') format('truetype');}



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 February 2014 - 03:14 PM

Can you email the zip containing the fonts and css etc...

 

danny at pagelines dot com



#7 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 February 2014 - 03:21 PM

Just sent Danny. THANKS!



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 February 2014 - 04:27 PM

OK, the issue is most definitely the font itself, I have just added that font of yours to my test site and the font displays fine on my MacBook, but not on my phone. However, I have just added the GoodDog font which is on our documentation and that displays fine.

Therefore, you will need to contact the author/developer of the font, as from what I can remember not all browsers can use .ttf font files which is what this font is using. The Gooddog font has a number of files which makes it compatible, I did try and use the Font Squirrel generator, but the fonts can not be used in there generator.



#9 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 February 2014 - 04:39 PM

Thanks for trying this for me Danny. I will contact them now since we did pay for these fonts. Sounds like you're pretty sure it's nothing in MY settings, which is always my concern?!



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 February 2014 - 11:26 AM

I don't think the issue is with your setup as far as I can see, if you follow the instructions I wrote from our documentation, any custom font should work. However, the fonts need to contain multiple files, as from what I've read, only certain browsers support .ttf file format. When I did my GoodDog font test, it contains multiple files for compatibility, see below:

 

gooddog-webfont.eot
gooddog-webfont.svg
gooddog-webfont.ttf
gooddog-webfont.woff
 
The font you wanted to use only provided a .ttf file, so this for me could be the problem, the font works as you have said, just not on mobile devices.
 
You could try adding the file to a web font generator, which may resolve your issue. However, I did the same thing on Font Squirrel and it appears the font file is protected. So if you have purchased this font, I highly recommend contacting the source you got it from and asking them for support.


#11 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 February 2014 - 04:12 PM

So the font company had me regenerate the fonts to include the svg and also to use absolute paths instead of the PL shortcode for paths. Still not working. Then they had me upload their folder with their css as a test. I did that here http://hoffmangraphi.../StartHere.html and sure enough the Segoe font is viewable on my Android phone. That tells me that something is amiss in what I've done in my site. I'm open to suggestions. I'm thinking either I need to put something in the DMS header script area pointing to the path or maybe I'm specifying my styles wrong? I don't know. So frustrating.



#12 James B

James B

    Advocate

  • Members

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

Posted 04 February 2014 - 11:49 PM

Reading the instructions above as they installed using their method/folder in the end, did you add the additional code that was omitted when using the pl method previously. Eg: the header scripts box

 

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

 

And the @import rule at the top of the css box

 

@import url("//hello.myfonts.net/count/29b709");



#13 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 February 2014 - 11:58 PM

No I didn't. Do I just copy those twho instructions into the top  the CSS or into the header scripts area in PL? This is completely new to me (obviously). I thought if the css was in my css I didn't need to add that reference. I can follow directions but I don't know what to do without them. Sorry to be so lame. This stuff is like Greek tome.



#14 James B

James B

    Advocate

  • Members

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

Posted 05 February 2014 - 12:49 AM

I'd def say try it, it won't do any harm, you can remove if it doesn't work etc.

 

From there instructions it looks to me, one goes in the header script, one goes int he css.

 

Add this line into the header scripts box

 

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

 

And then at the very top of the css panel (@import rules always need to go right at the top, first entry) add

 

@import url("//hello.myfonts.net/count/29b709");



#15 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 05 February 2014 - 01:35 AM

OK, I did both of those things. But I'm confused. I went ahead and uploaded their folder that worked on my test directly to the root directory. But the fonts are also in my child theme in the fonts folder and I gave all my CSS that path. Do I need to change the path in their css href in the header? Or change the path in my CSS? I'm feeling really stupid and I have a feeling this is not that hard!



#16 James B

James B

    Advocate

  • Members

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

Posted 05 February 2014 - 02:21 AM

Hey Shelia, I'm a bit confused now as well so don't worry :-)

 

Back up all your existing css first so you have a copy and can revert if needed.

 

If they uploaded to the root in the text and used the direct path to the file they installed in the root and it worked properly, they I would replicate this in the live site too. Just update the css url's in the child theme to the root file url like below.

 

@font-face {
    font-family: 'SegoeScript-Bold';
    src: url('put the full url in here');

 

The headerscripts code is in the root, so I'd leave that as it is as that's how they had originally. And remember to put the @import rule at the top of the child theme css.



#17 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 10 February 2014 - 04:02 PM

This got tabled while I launched another site. Fortunately this client isn't yelling at me about how the fonts don't work on her phone. But it bugs me not to be able to make this work correctly. I've done what you suggested and still no joy. Here is the current code at the top of my custom CSS;

 
@import url("//hello.myfonts.net/count/29b709");

/* custom fonts */

  
@font-face {font-family: 'SegoeScript';src: url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_0_0.eot');src: url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_0_0.eot?#iefix') format('embedded-opentype'),url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_0_0.woff') format('woff'),url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_0_0.ttf') format('truetype'); url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts//29CBAE_0_0.svg#wf') format('svg');}
 
  
@font-face {font-family: 'SegoeScript-Bold';src: url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_1_0.eot');src: url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_1_0.eot?#iefix') format('embedded-opentype'),url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_1_0.woff') format('woff'),url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29B709_1_0.ttf') format('truetype'); url('http://coachmediateconsult.com/MyFontsWebfontsKit/webfonts/29CBAE_1_0.svg#wf') format('svg');}

.SegoeScript { 
	font-family: SegoeScript;
	font-weight: normal;
	font-style: normal;
}
.SegoeScript-Bold { 
	font-family: SegoeScript-Bold;
	font-weight: normal;
	font-style: normal;
}

I'm pretty sure that's correct for the root. I'm ready to give up. I'd pay someone to make this work.



#18 James B

James B

    Advocate

  • Members

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

Posted 11 February 2014 - 01:51 AM

Hi Shelia

 

Can you email me the new zip for the fonts with the additional versions the font author included for you, along with the instructions they sent. James @ pagelines . com and I'll try this end for you. It will be easier if I can go through the process with that particular font and replicate.