Adding custom fonts with @FontFace and CSS

Resolved Anna1226
(@anna1226)

8 years, 5 months ago

There are plenty of sources of instructions and I’ve checked a lot of them. I feel like I’m doing it right.

I DID convert my font to web fonts.
They ARE uploaded to my theme font folder.

I coped the CSS directly from the css output generated by Squirrel font.

The @font-face and the h1 tags are in both my child theme css and the customizer css.

And yet my font – Souvenir Demi – isn’t being picked up. What am I doing wrong?

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

8 years, 5 months ago

I see what you added, but when I try to access

http://coffeenewsmd.com/wp-content/themes/switty/fonts/SOUVENIRD.TTF

I get a 404 error. Verify that the file is there *and* that you have the capitalization right.

See https://i.imgur.com/gaAirtt.png

Thread Starter Anna1226
(@anna1226)

8 years, 5 months ago

Hey Steve,

Thank you so much – as is often the case, one needs a 2nd set of eye. Yeah – I had typos and misnomers. Ok, fixed things, still not working.

1. Yes, the font(s) are installed. See here:
http://www.coffeenewsmd.com/wp-content/themes/switty/fonts

2. Pretty sure my @font-face and my <h1> in my CSS match up now.
https://www.dropbox.com/s/l6xvhy8xelllf56/Screenshot%202018-01-08%2023.36.54.png

3. It’s still not reading the font.
https://www.dropbox.com/s/03rgebgxj2q0xwq/Screenshot%202018-01-08%2023.39.35.png
— When I manually change the headline (Gain the Coffee News Advantage, which shouldn’t be capped, btw; who knows where that is coming from?)
to Alice, for example, the headline font changes, the hover sample changes.

When I do the same with ‘souvenir_lt_btdemi’ – Souvenir Demi is NOT rendered.
Looks like my custom CSS code is being picked up
https://www.dropbox.com/s/03rgebgxj2q0xwq/Screenshot%202018-01-08%2023.39.35.png

but the font still isn’t displaying.

Cripes – any suggestions? What’s still broken?

Thread Starter Anna1226
(@anna1226)

8 years, 2 months ago

Still not resolved. The CSS is being read, the file is uploaded, the path is correct. WordPress won’t “read” the font. What am I doing wrong?

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

8 years, 2 months ago

What part of your page uses (or should be using) that font?

Thread Starter Anna1226
(@anna1226)

8 years, 2 months ago

http://coffeenewsmd.com/

The home page, 1st headline:
Gain the Coffee News Advantage

Right now, it’s picking up the body H1, which is set to “Bad Script”. If you inspect element and look at the CSS, you can see the secondary H1 is set for souvenir_lt_btlight.

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

8 years, 2 months ago

Your fonts are uploaded and linked with a “www” in the URL. Remove the WWW as the site does not use it and it causes CORS issues on the fonts being loaded.

Thread Starter Anna1226
(@anna1226)

8 years, 2 months ago

Yes! That was exactly it! I’d have never figured that one out. Thank you so much!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Adding custom fonts with @FontFace and CSS’ is closed to new replies.

Adding custom fonts with @FontFace and CSS

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics