Add fonts to Parallax Child theme

[susie]

I added web fonts to my Parallax child theme but the fonts do not display as they should. What is the problem?
I added the code below in the styles.css and used the following html in the page I was testing.
I tried Firefox, Chrome and IE all do not display the font as it should be.
<p style="font-family: 'napoli_serialregular';">My text</p>

@font-face {
    font-family: 'napoli_serialregular';
    src: url('http://anabofit.com/fonts/Napoli_Serial-Regular-webfont.eot');
    src: url('http://anabofit.com/fonts/Napoli_Serial-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://anabofit.com/fonts/Napoli_Serial-Regular-webfont.woff2') format('woff2'),
         url('http://anabofit.com/fonts/Napoli_Serial-Regular-webfont.woff') format('woff'),
         url('http://anabofit.com/fonts/Napoli_Serial-Regular-webfont.ttf') format('truetype'),
         url('http://anabofit.com/fonts/Napoli_Serial-Regular-webfont.svg#napoli_serialregular') format('svg');
    font-weight: normal;
    font-style: normal;`

}

http://www.anabofit.com

[Brad Dalton]

Try this install custom fonts

Maybe the path to your font files is wrong.

Also try:

body {
    font-family: napoli_serialregular;
    font-size: 18px;
}

---

Tutorials for StudioPress Themes.

[susie]

That did not work. I think the path is fine. I created a fonts folder to put the fonts in.
this is what i have tried. I am a total noob but just don't know where i am going wrong on this.
I just need this font for a few words throughout the site.

body {
	background-color: #fff;
	color: #000;
	font-family: 'Sorts Mill Goudy','napoli_serialregular', sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

I also tried a class

p.logotext {
	font-family: "napoli_serialregular";
	font-size: 18px;
	font-color: orange;
	text-align: center;
}

Then in the page typing

<p class="logotext">ANABOfit</p>

[Jason Weber]

I utilize Use Any Font on a lot of my websites. Never had a problem.

---

Webby’s WebPrezence
National Center For Due Process

[Victor Font]

The first thing I see is that you don't load the fonts until line 842 of style.css and you call them to be used before they are loaded. @font-face needs to be at the top of style.css before any references to them in the file, not midway down.

Second, browsers will use fonts in the order they are listed. You have font-family: 'Sorts Mill Goudy','napoli_serialregular', sans-serif; This line will always use Sorts Mill Goudy first. Studio Press themes load their fonts in functions.php. Hope this helps.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Brad Dalton]

@susie

The tutorial i linked to clearly states that you need to add @font-face at the start of your style sheet.

The video tutorial in the tutorial also shows this.

The reason your fonts don't work is because you haven't installed them properly and some CSS rules, as indicated by Victor, are not written correctly.

---

Tutorials for StudioPress Themes.

[susie]

Thank you. I am completely new at this and I appreciate the help.

[susie]

Thank you for taking a look. I am completely new at this and I appreciate the help. I will rework the code.

[susie]

Great. I did use the plug-in. Thank you. I am also going to try the other suggestions as I want to learn how to code CSS correctly.
Thank you again.

[Author]

Posts