Only some of the font will display on other computers.

  • Author
    Posts
  • #1554721

    ssj4000
    Member

    I need help making my League Gothic subheadings work.

    If you don’t have League installed on your computer, you will see it correctly on the headers and footers on my page. However the subheadings I made it wont. The font clearly downloads but wont be used in some instances.

    Please help me, I believe there is an error in my coding >.<

    The blog I need help with is sortanceslove.com.

    #1554823

    raincoaster
    Member

    Well, this would have been better posted in the CSS forum, so I will flag it to be moved there.

    #1554825

    ssj4000
    Member

    I am unsure if it is a css or html problem…

    :(

    #1554880

    Hi @ssj4000, I’ve checked a number of pages on your site and see headings in League Gothic on Safari, Firefox and Chrome.

    Can you tell us what browser and browser version you are having problems seeing the font on? Are the computers on the same internet service/connection or a different one? Is the computer behind a firewall, such as at a place of work?

    #1554881

    ssj4000
    Member

    It was both a css and html problem.

    I fixed it by adding <h1/h6> instead of <p> to the html codes.

    (I believe that is the only way WordPress uses TypeKit to force the download of your main font.) I then did a little css coding on the back end to make everything the right colors/color hovers.

    If there is a better way to fix this I would like to still know :D
    Otherwise case closed. Maybe this might help someone else?

    #1554889

    For headings in the content, I would definitely use the h1-h6 tags. Generally I would suggest leaving h1 for the post and site titles and then use h2-h6 in the content for search engine purposes.

    The “heading” setting in Custom Fonts will only apply to h elements, but since that font is already loaded, you could apply it to a “p” element with a style attribute in the opening “p” tag such as this:

    <p style="font-family: league-gothic-1,league-gothic-2,"Oswald",sans-serif;">

    The font stack I copied from the font stack for “h” elements in your site. You could add additional inline CSS to that style attribute as needed (size, weight, color, etc.).

    #1554903

    ssj4000
    Member

    I tried to input the code you gave, and it didn’t work. :(

    I don’t know if it is something I am doing wrong, or what? For some reason it doesn’t want to download the font unless it is h1-h6. It seems like the only other alternative it is @fontface. However WordPress.com doesn’t support @fontface

    Why doesn’t wordpress.com support @fontface?

    Anyway… those who are wanting a font other then what typekit provides for WordPress.com is up a creak without a paddle it seems…

    #1554908

    Hmmm, weird. I know I’ve done that before. I just tried it on your site in a draft post and it is not working.

    On another note, you have a span tag around some of your paragraphs that is setting Myriad Pro as the font, which is not a font that is in a typical computer font library, so most people would not see it. I’m also seeing a class of “MsoNormal” which indicates a direct copy/paste from MS Word, which can mess things up. There is a button on the lower toolbar in the editor for pasting from MS Word that will clean out the messy code that MS Word creates. I would suggest using that. You click the button and then paste the MS Word stuff in there and then do your formatting in the WordPress editor so you get clean, web compliant code.

    #1554909

    ssj4000
    Member

    Thank you for the counsel, I am going to apply your suggestion to my whole site! It is sadly going to take a little time to get rid of all the fluff word added…

    P.S. I pasted Myriad Pro from word and struggled to format everything because I didn’t know any better. However it did give me my desired font.

    #1554910

    ssj4000
    Member

    P.P.S. For some reason Myriad Pro is seen just fine on other devices… Maybe because it is from Adobe and just about every computer has Adobe installed on it? >.< Or maybe because TypeKit is Adobe? Anyway…. it works and that makes me happy :D

    #1554914

    I would have some of your friend’s check the site and let you look at the font on their systems. I just tried it on our PC laptop and it is showing a Times Roman style of serif font, not Myriad Pro, and that is also what I’m seeing on my iPhone and iPad as well, not Myriad Pro. I see Myriad Pro on my laptop since I have somewhere around 30,000 fonts (very slight exaggeration) installed on my system.

    #1554916

    ssj4000
    Member

    Well what can you do…

    I guess if they don’t have Myriad Pro then I am boned, I can’t force it to download.

    Any suggestion for a font that is similar that everyone has?

    #1554925

    Have you looked through the offerings in Typekit for an alternative?

    For a non-Typekit alternative, you might want to see how this font stack works. Not all computers have Helvetica Neue, but it is a very nice font if they do, and the stack keeps Arial on low priority (not a fan of Arial).

    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

The topic ‘Only some of the font will display on other computers.’ is closed to new replies.