CSS code – custom fonts

Font names have to be in “quotation marks”

where did you add this CSS?

it seems to be not visible when checking headlines with ‘inspect element’.

there are also some elementor styles setting fonts for the headings etc…

your styles are way to un-selective to overwrite those elementor styles or most other styles…

I tried to test your font files in this page, using the Developer Tools of the browser and fixing what small problems I see like no space between the url and the format. But it won’t load the font because of the Cross Origin problem, so I can’t test it remotely.
Your CSS for links selector won’t work. It would have to be a. And usually you more than one font, so that there can be a fallback, like Arial,Helvetica,sans-serif.
I don’t know if the name of font should match what is in the file, but if you look at the Google fonts on this page using the Developer Tool in your browser, you will see that the name in font-family is different than the local font name and the file name in the url.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-U1Ug.ttf) format('truetype');
}

Thank you all for your replies!
@jaycbrf I’ve applied those, which resulted in the lines being highlighted in red, looks good to me

@alchymyth I put the code style.css (Appearance -> Theme editor) Perhaps you’re right and I should just stick with the ones we’ve got, if this doesn’t work out I certainly will

@joyously Thanks Joy, I didn’t fully comprehend the last bit, I’ve tried changing the code accordingly:

`}
@font-face {
font-family: “ClarendonLTStd-Light”;
src: url(https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd-Light.ttf)format(‘truetype’);
font-weight: normal;
}
@font-face {
font-family: “ClarendonLTStd”;
src: url(https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd.ttf)format(‘truetype’);
font-weight: normal;
}
@font-face {
font-family: “KasseFLF-Bold”;
src: url(https://elixirlife.nl/wp-content/themes/jupiterx/fonts/KasseFLF-Bold.ttf)format(‘truetype’);
font-weight: normal;
}

body{
font-family:”ClarendonLTStd-Light”;}
a{
font-family:”ClarendonLTStd-Light”;}
h1{
font-family:”ClarendonLTStd”;}
h2, h3, h4, h5, h6, h7{
font-family:”KasseFLF-Bold”;}

I don’t think it did the trick though, I therefore might just go with one of the Google fonts.

Best regards,
Wouter

• This reply was modified 5 years ago by wsamvanderlinden.

I put the code style.css (Appearance -> Theme editor)

that is the main reason your CSS did not work – your theme actually does not use style.css in the site;

try adding the CSS via ‘Appearance’ – ‘Customize’ – ‘Additional CSS’

and possibly inforce it by adding !important to the styles to overwrite all interfering styles added by the elementor etc:

body {
	font-family: ClarendonLTStd-Light!important; }
links {
	font-family: ClarendonLTStd-Light!important; }
h1 {
	font-family: ClarendonLTStd!important; }
h2, h3, h4, h5, h6, h7 {
	font-family: KasseFLF-Bold!important; }

also, the developers of your theme might be useful in supporting any further questions.

@alchymyth
Amazing, this is just what I needed! Thank you so much ??

Check it out:
elixirlife.nl

P.S. My designer and I thought it would be cool to match the product typography on the website