Jump to content

Archived

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

sheilahoff

Using Google Font questions

Recommended Posts

sheilahoff

My dev site is currently at http://www.stacey.hoffmangraphics.com in DMS v2.

 

I have a couple of font related questions.

 

1) I've installed a non-Google font we purchased. It is Segoe and it's in use in the sidebar quotes on this page http://stacey.hoffmangraphics.com/stacey/ I see the correct font and others I've asked also do. But the client is on a MAC and she is not seeing it. I need to figure out if it's a user error on her part (I've had her clear cache) or if it's a MAC thing. Assuming that later, is there something more I need to do to get it to work?

 

Here's what I have in the top of my CSS:

 @font-face {
    font-family: 'Segoe';
    src: url('http://stacey.hoffmangraphics.com/webfonts/29CB79_01_0.SVG') format('svg');
    font-weight: normal;
    font-style: normal;
}

2) I've set the site fonts in Site Settings. Now she wants the text on the homepage to be Paprika. That is an installed Google Font. I can set it in Site Settings but she doesn't want it throughout, only on the one page. I've tried created a custom style but it's not displaying Paprika. Can I just use all those Google Fonts that show up in Site Settings or if they're not set there do I have to do something more for them to work? It's possible I've done the CSS coding incorrectly as I'm not a great coder. Here's what I did...

.home-heads h1{
	font-family: 'Paprika', cursive;
    	color: #6351A3;
  	font-size: 3em;
}
.home-heads h2{
    font-family: 'Paprika', cursive;
    color: #6351A3;
    font-size: 1.5em;
}

Then on the page I did this:

<home-heads h1>Are you living an extraordinary life?</home-heads h1>
<home-heads h2>Get started at my FREE monthly JumpStart.</home-heads h2>

 

I hope someone can help me make this work.

Thanks!

Sheila


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Simon

Should be:

<h1 class="home-heads">Are you living an extraordinary life?</h1>
<h2 class="home-heads">Get started at my FREE monthly JumpStart.</h2>

Share this post


Link to post
Share on other sites
sheilahoff

Thanks so much Simon. That did the trick!

 

Now on the first part of my post....I just got a screen capture from someone's iPhone. Apparently MACs are not seeing the specified font so instead it's substituting a generic UGLY script font. Any ideas how to fix that?


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Simon

Well im on a MAC, looked fine in all browsers

 

Share this post


Link to post
Share on other sites
sheilahoff

We're cross posting. What you posted is a default script font and NOT what I have specified or what I see on my Windows computer. So I need to figure out how to make the font work on MACs.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

It is uploaded but from that error it appears to be a path issue. I just tried to fix it. Maybe you could check it again and see if it's good now?! Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

Brilliant! Hopefully that'll do it. I have no way to check and client is not available currently. But sounds like it should work. YAY! You're the BEST!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

Sorry...one more font related issue on same site. We're using Google's Garamond for her headings. But she wants Garamond Book Condensed which isn't part of Google Fonts. She's willing to buy it here https://www.myfonts.com/fonts/itc/garamond/webfont_preview.html. Before we do I want to be sure I can make it work. They offer a 30 day free trial. I added the code below to the PL header scripts as indicated. Then set H2 CSS to  font-family: 'ITC Garamond Cond Book'. I'm likely doing something wrong in my CSS again. The site doesn't have anything H1 tags...we're only using Headline section for every page's heading and subhead. That's what I'm trying to get to use the condensed font for.

<script type="text/javascript">
    (function() {
        var path = '//easy.myfonts.net/v2/js?sid=215774(font-family=ITC+Garamond+Std+Bold)&sid=2416(font-family=ITC+Garamond+Cond+Book)&sid=215777(font-family=ITC+Garamond+Std+Book)&sid=215782(font-family=ITC+Garamond+Std+Light)&key=I7SAguDjnt',
            protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'),
            trial = document.createElement('script');
        trial.type = 'text/javascript';
        trial.async = true;
        trial.src = protocol + path;
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(trial);
    })();
</script>

Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

UPDATE:

 

1) adding the slash for the path didn't fix it and furthermore switching to an absolute path didn't fix it either. I think there's something else wrong. Apple products still don't see the font at all.

 

2) On my new font question, I'm now able to see the font and DMS is using it. I don't know yet if it is showing up on MACs though!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

1. What do you mean by number 1, what are you referring to, the font from the third party website ?

 

2. What do you mean you can see the font DMS using but its not showing up on MACS ? Do you mean a Mac i.e. OSX ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sheilahoff

I meant I tried just adding the leading slash you suggested above and it didn't work. Then I changed it to the full path and it still doesn't work. Like this:

 

@font-face {
    font-family: 'SegoeScript';
    src: url('http://stacey.hoffmangraphics.com/webfonts/29CB79_1_0.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

And yes, when I say MAC I guess I do mean OSX. The Garamond Condensed font seems to be working on OSX but so far I have not found any tweaks that allow the SegoeScript to display properly on OSX. I've tried so many permutations that I've likely botched it somehow.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

What do you mean by Headline section, do you mean Highlight ?

 

I have just this moment added the script provided by that font site and then added the font-family: 'ITC Garamond Std Light Condensed' to the highlight sections title class .highlight-head

 

So there is no issue with the font.

 

If you want to use custom fonts, on HTML, you do as Simon mentioned above and create a custom class, then give that HTML element that class, for example:

 

<h1 class="my-font">...</h1>

<p class="my-font">...</p>

 

and so forth, if you want to use a custom font on a specific section or element, where you can't include a class, then you're going to need to overwrite the CSS using custom CSS.

 

The likely reason as to why your Segoe font isn't working correctly on OSX, is because you have included all the files in the @font-face, please see the instructions which the font provider should include. I also recommend you see our custom fonts documentation.

 

http://docs.pagelines.com/tutorials/adding-custom-fonts

 

If you encounter any more issues with your implementation of custom fonts, you will need to contact the font provider for assistance. As this isn't a DMS problem.

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sheilahoff

Sorry...Yes I meant Highlight (using it as headlines). Meanwhile this is sort of old news. At this point client bagged Paprika and went back to wanting Segoe. So we purchased both Segoe and the Garamond Condenses from MyFonts. I've installed them and they look right on my Windows computer. But I've checked with a friend with a Mac and the Segoe script in the sidebar still isn't working and while the Garamond Condensed is working for the Hightlight the subheading there which is italic is going bold on Macs and it shouldn't be. Not sure what I'm missing. Just opened a ticket with MyFonts since we purchased but no idea when or if they'll be any help. So here's everything about this that is current... in case you can help. In checking the PL documentation about all this it appears I need to add @import url("//hello.myfonts.net/count/2bdcdc"); But I'm very confused because their instructions don't say that. And following your instructions I should be able to extract info from the file they provided which is not really obvious how to do (I would attached it but it says it's too big even though it's not).

 

OK…I have followed the  instructions and have installed all 3 purchased fonts. The blue banner is gone which is good so I’ve made some progress but need your help. The issues are that on a Mac the script defaults to Mac’s default and does not display Segoe and the italic subheads are bolded which makes them wrap. Here is a page link that shows both: http://stacey.hoffmangraphics.com/stacey/   I hope you can help me sort this.

 

I’ve uploaded all the fonts into a folder called webfonts. I have the two CSS sheets in the root directory of the site and have this in the header:

<link rel="stylesheet" type="text/css" href="http://www.stacey.hoffmangraphics.com/Stacey-Segoe.css">

<link rel="stylesheet" type="text/css" href="http://www.stacey.hoffmangraphics.com/Stacey.css">

 

I suppose I could combine these but I bought them at different times.

 

Then this in the top of my CSS per your instructions.

 

.SegoeScript {

                font-family: SegoeScript;

                font-weight: normal;

                font-style: normal;

}

 

.ITCGaramondStd-BkCond {

                font-family: ITCGaramondStd-BkCond;

                font-weight: normal;

                font-style: normal;

}

.ITCGaramondStd-BkCondIta {

                font-family: ITCGaramondStd-BkCondIta;

                font-weight: normal;

                font-style: normal;

}

 

The Segoe is used in two sidebar quotes and the Garamond is used as page headers (normal) and subheads (italic) It all looks correct on my Windows PC but then I have these fonts on my computer.

 

And here is my CSS for the relevant items…

 

.section-highlight .highlight-head {

  font-size: 60px;

  text-align: left;

  font-family: 'ITCGaramondStd-BkCond';

  font-weight: normal;

}

 

.section-highlight .highlight-subhead {

    font-size: 24px;

    margin-top: 5px;

    opacity: 0.75;

    text-align: left;

  font-family: 'ITCGaramondStd-BkCondIta';

  font-weight: normal;

}

 

.rotatingtext .rselector {

                font-family: 'Segoe Script', cursive;

                font-size: 15px;

                line-height: 200%!important;

                margin: 0 50px!important;

    text-align: center!important;

}

 

NOTE: when I put font-family as SegoeScript with no space I didn’t see the font on MY computer. But with the space I do see it.

 

I hope there’s some easy solution to getting these fonts to work on the Mac. Otherwise we’ll need to request a refund!

 

Thank you.

Sheila Hoffman


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

Sheila, this isn't an issue we can help you with as it has no relation to DMS, you need to contact the font author(s) for support.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×