• Hello,
    I’m working on a site for a friend of mine and she wanted me to use a font the website’s header.
    here’s what the header looks like for me:
    https://ariellafreinders.co.uk/header.jpg

    this is the site:
    https://jacquelinemcquade.com

    but for her and the people I’ve asked to check it just looks like the standard font, and I don’t understand why.
    this is the code myfonts.com sent me and I’m using:
    @import "//hello.myfonts.net/count/2e32f5"; (at the top of the CSS file)

    @font-face {
    	font-family: 'JamesPaul';
    	src: url('/wp-content/fonts/2E3019_0_0.eot');
    	src: url('/wp-content/fonts/2E3019_0_0.eot?#iefix') format('embedded-opentype'), url('/wp-content/fonts/2E3019_0_0.woff2') format('woff2'), url('/wp-content/fonts/2E3019_0_0.woff') format('woff'), url('/wp-content/fonts/2E3019_0_0.ttf') format("truetype");
    }
    
    .site-title, .site-title a {
    	font-family: JamesPaul;
    	text-transform: none;
    	font-size: 1.5em;
    }

    I’ve tried moving the font files to the same folder as the CSS file, I’ve tried disabling the font on my own computer cause I heard people say that’s why it could’ve been working for me. But none of those things seemed to make any difference. No one else can see this font apparently.
    What am I doing wrong? I’m sorry if this exact question has been asked before, I did search for it, but I didn’t find my exact issue.

Viewing 10 replies - 1 through 10 (of 10 total)
  • By using this code:

    @font-face {
    	font-family: 'JamesPaul';
    	src: url('/wp-content/fonts/2E3019_0_0.eot');
    }

    You’re linking to this file:

    https://www.jacquelinemcquade.com/wp-content/fonts/2E3019_0_0.eot

    But as you can see if you click this link, that file doesn’t exist. I don’t know where you DID put the font file, but it needs to link to the proper location.

    (Also, the code you pasted in your message above is NOT all on your site. I see you link to the EOT file, but not the WOFF or TTF files. You’ll need to include all of them.)

    Thread Starter rrcplus

    (@rrcplus)

    The code I posted in my first post is the code that’s in my CSS.
    So I’m not entirely sure why you’re saying I didn’t link to any other font files?

    I changed the link locations, and all of these links exist, however it’s still not working.

    @font-face {
    	font-family: 'JamesPaul';
    	src: url('/wp-content/fonts/2E32F5_0_0.eot');
    	src: url('/wp-content/fonts/2E32F5_0_0.eot?#iefix') format('embedded-opentype'), url('/wp-content/fonts/2E32F5_0_0.woff2') format('woff2'), url('/wp-content/fonts/2E32F5_0_0.woff') format('woff'), url('/wp-content/fonts/2E32F5_0_0.ttf') format("truetype");
    }

    The code I posted in my first post is the code that’s in my CSS.

    Where is that located? I don’t see it in your CSS file: https://www.jacquelinemcquade.com/wp-content/themes/sketch/style.css?ver=4.2.2 (search for “woff” or “eot” in there and you’ll get no results).

    In your custom CSS you have this code:

    @import "https://hello.myfonts.net/count/2e32f5";
    @import "https://fonts.googleapis.com/css?family=Kaushan+Script";
    @import "https://fonts.googleapis.com/css?family=Damion";
    @font-face{font-family:'JamesPaul';src:url('/wp-content/fonts/2E32F5_0_0.eot')}

    Aside from the fact that there’s no reference to WOFF files there, or TTF (which you need), that last line is important: you’re linking to the file https://www.jacquelinemcquade.com/wp-content/fonts/2E3019_0_0.eot
    If you click on that link here, you’ll see that it doesn’t exist; there is no file called 2E3019_0_0.eot in the directory wp-content/fonts.

    Thread Starter rrcplus

    (@rrcplus)

    I added some google fonts to see if those would work, and they do work.
    I’ve added the code I showed you in the “CSS” section of WordPress under “appearance”.
    I changed the link to a link that actually exists, and the .TFF and woff and woff2 files have always been in that document. I’m not sure why they’re not visible.

    in my CSS section, I’m linking to:
    https://www.jacquelinemcquade.com/wp-content/fonts/2E32F5_0_0.eot which in fact does exist. So I’m not sure why these changes are not being implemented.

    to clarify, this is what I’m looking at:
    https://ariellafreinders.co.uk/fonts.jpg

    am I not supposed to do it in this section? I hope this somewhat explains my confusion.

    I just tested it, and for some reason, the custom CSS plugin you’re using strips the entire second half of the code in your @font-face declaration. It appears fine in the editor, but if you view the website’s source itself, the code is gone. Try this code instead:

    @font-face {
    	font-family: 'JamesPaul';
    	src: url('/wp-content/fonts/2E32F5_0_0.eot') format('embedded-opentype'), url('/wp-content/fonts/2E32F5_0_0.eot?#iefix') format('embedded-opentype'), url('/wp-content/fonts/2E32F5_0_0.woff2') format('woff2'), url('/wp-content/fonts/2E32F5_0_0.woff') format('woff'), url('/wp-content/fonts/2E32F5_0_0.ttf') format("truetype");
    }
    Thread Starter rrcplus

    (@rrcplus)

    That doesn’t work either. ??
    I’ve tried adding <link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">
    to the header.php (cause the support person at myfonts said that generally this stuff is added in the header).
    I’ve opened up the styles.css and pasted @font-face and @import code directly in to the file and it still doesn’t work.

    I just don’t know anymore, perhaps I should just go with a Google Fonts font instead?

    When I look at the source code at jacquelinemcquade.com, I see that all of the src rules are present in the @font-face declaration, but the quotes have been replaced with HTML entities, which won’t work. You need to make sure you’re using straight quotes instead of curly quotes. Try copying the code directly from this page.

    Thread Starter rrcplus

    (@rrcplus)

    Ah oops. I thought it looked a bit odd.
    That seems to have done the trick though. May I ask what you changed exactly?

    al though I’m kind of afraid to remove the code from the style.css in fear of it not working again lol.

    In your @font-face declaration, you had two separate srcs defined (It’s worth pointing out that this does validate.):

    @font-face {
    	font-family: 'JamesPaul';
    	src: url('/wp-content/fonts/2E3019_0_0.eot');
    	src: url('/wp-content/fonts/2E3019_0_0.eot?#iefix') format('embedded-opentype'), url('/wp-content/fonts/2E3019_0_0.woff2') format('woff2'), url('/wp-content/fonts/2E3019_0_0.woff') format('woff'), url('/wp-content/fonts/2E3019_0_0.ttf') format("truetype");
    }

    For some reason, the specific custom CSS plugin you’re using strips out the second src line before writing the CSS to the page, although it still displays correctly in the editor.

    Check out these screenshots: https://imgur.com/a/g2egs In the first image, you can see that I posted the exact code you used in your original post. In the second image, you can see the code that was actually written to the <head> section.

    I haven’t checked the original source of the page declaration, but is it using html5, as in <!doctype html> instead of the full xhtml, traditional, strict, etc?

    Just thinking since it is stripping everthing apart from the first source declaration….?

    Also, since you’re the only one that sees it, am I correct to assume you have the actual font installed on your machine? If yes, try uninstalling and try the site again. This is just as a test to try and eliminate that factor (temporarily).

    Again, I am only assuming vaguely as I haven’t seen any code yet, just going based on the posts.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘@font-face works for me, but no one else.’ is closed to new replies.