@font-face doesnt ever work

Hey, Ive been trying to use @font-face a few times over the past two years and it never works for me so I end up using a plugin. But my site is slow and Id really like to know what Im doing wrong.

I added a fonts folder to my x child theme.
Ive tried
font-face {
@font-family: ‘american-typewriter’; /home/l2122781779017/html/wp-content/themes/x-child/fonts
src: url(‘http://fatcatpaperie.com/home/12122781779017/html/wp-content/themes/x-child/fonts/american-typewriter.woff’),
url(‘http://fatcatpaperie.com/home/12122781779017/html/wp-content/themes/x-child/fonts/american-typewriter.woff’) format(‘woff’),
url(‘http://fatcatpaperie.com/home/12122781779017/html//wp-content/themes/x-child/fonts/american-typewriter.woff’) format(‘truetype’),
url(‘http://fatcatpaperie.com/home/12122781779017/html/wp-content/themes/x-child/fonts/american-typewriter.woff’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

and

@font-face {
font-family: ‘american-typewriter’;
src: url(‘http://fatcatpaperie.com/wp-content/themes/x-child/fonts/american-typewriter.woff’),
url(‘http://fatcatpaperie.com/wp-content/themes/x-child/fonts/american-typewriter.woff’) format(‘woff’),
url(‘http://fatcatpaperie.com/wp-content/themes/x-child/fonts/american-typewriter.woff’) format(‘truetype’),
url(‘http://fatcatpaperie.com/wp-content/themes/x-child/fonts/american-typewriter.woff’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

Then added

h1, .h1 {
font-size: 2em;
font-family: ‘american-typewriter’;
}

Doesn’t work. Please tell me what Im doing wrong

Thank you!
Rena

Rena,

It looks like you are using a plug-in currently “use any font”? so the font is rendering in your H1 tags.

However it looks like your code above is wrong and you are not including all the font files.
Click here for the files that “should” be uploaded. Using font-face

If you own the font you should have different file formats of the font file. Here is how your code should look as an example, you can see that there are different file types (.eot, .woff, .ttf, .svg):

@font-face { font-family: 'MyWebFont'; src: url('path-to-your-font-directory/font_name.eot'); src: url('path-to-your-font-directory/font_name.eot?#iefix') format('embedded-opentype'), url('path-to-your-font-directory/font_name.woff') format('woff'), url('path-to-your-font-directory/font_name.ttf') format('truetype'), url('path-to-your-font-directory/font_name.svg#svgFontName') format('svg'); }

Place these files in your wp-content/themes/x-child/fonts folder and update the code snippet above.

Additionally your code on your the home page is incorrect too:
`

Welcome to Fat Cat Paperie, an invitation and graphic design studio with a specialty in wedding invitations.

`

This should be sufficient:
`

Welcome to Fat Cat Paperie, an invitation and graphic design studio with a specialty in wedding invitations.

`

You then need to add your style to the customizer so the h1 tag knows how to be styled:
h1 { font-family: 'american-typewriter'; }

You may need to add !important after the property if it is being overwritten:
h1 { font-family: 'american-typewriter' !important; }

I hope that helps a bit.

@designerken Awesome tutorial man :slight_smile:

@fatcatgraphics If that is not enough, follow this one here

Issues that I saw by just looking at your css code. This is wrong http://fatcatpaperie.com/home/12122781779017/html/wp-content/themes/x-child/fonts/american-typewriter.woff

This is the correct one:

http://fatcatpaperie.com/wp-content/themes/x-child/fonts/american-typewriter.woff

I can tell that because the first one returns a 404 (not found) page and the second one downloads the font.

Another thing, declare your font-family: 'american-typewriter'; as !important your selector (h1, .h1) is not specific enough to overwrite the default.

e.g.

h1, .h1 {
	font-size: 2em;
	font-family: 'american-typewriter' !important;
}

Cheers!

THANK You! I was confused about the path name. However I made all those changes and its still not working. I do have the USE ANY FONT plugin off when I work on it but I have to turn it back it on since I can’t get it to work. Currently its off.
I do not have the sag file. Its the only one missing. Could this be the problem?

Hello There,

Thanks for updating in! I noticed that you have installed WP Autoptimize. Please regenerate the JS/CSS cache in this plugin. If you have installed other caching plugin, please clear the cache too before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Please let us know how it goes.

I still cannot get this to work! I wrote a couple of weeks ago trying to get @font-face to work and gave up and used a plugin. Now I’m trying again on a new site. No luck!

I have:
@font-face {
font-family: ‘http://www.longislandshuckingtruck.com/wp-content/themes/x/framework/fonts/know_your_productregular’;
src: url(‘http://www.longislandshuckingtruck.com/wp-content/themes/x/framework/fonts/know_your_product-webfont.woff2’) format(‘woff2’),
url(‘http://www.longislandshuckingtruck.com/wp-content/themes/x/framework/fonts/know_your_product-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}
h1, .h1 {
font-size: 60px;
font-family: ‘know_your_productregular’ !important

I put the fonts in my fonts folder in X theme folder

What am I doing wrong!?:sob:

Hi There,

@font-face {
font-family: 'http://www.longislandshuckingtruck.com/wp-content/themes/x/framework/fonts/know_your_productregular';

Should have the name of the font not the URL

Hope it helps

Thank you. I changed it but its still not working :thinking:

I keep trying different things. Now I have

@font-face {
font-family: ‘know_your_productregular’;
src: url(‘know_your_product-webfont.woff2’) format(‘woff2’),
url(‘know_your_product-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}
h1, .h1 {
font-size: 60px;
font-family: ‘know_your_productregular’ !important

Hi There,

The first two reply above are detailed instruction on how you can add a custom webfont to your site :slight_smile:
Now if you’re confident enough that you followed it thoroughly but still does not work, then maybe its the best time you provide us admin and FTP credentials in Secure Note so we can take a closer look.

Please clear and deactivate all your caching plugins while we troubleshooting this.

Cheers!

Ok I decided to give it one more shot and I GOT IT!!!
Except it wont work on my iphone.

First bit of text “Oyster Bar” should be in knowyourproduct font.

Any suggestions?

Thank you!!! It took me many attempts but I finally got it! (eExcept for my iphone) If someone can just help me figure out why its not working on my Iphone.

Appreciate the help!
Rena

Hi There,

Glad to know that you’re making progress, but on your CSS you got the path to the files wrong see the correct path on the secure note. And please rename your font files and the /KnowYourProduct folder to all lowercase.

Thanks,

Thank you!! It worked & I finally understand it!
I really appreciate it!

Rena

You’re welcome, Rena.