CSS code – custom fonts

(@wsamvanderlinden)

Hello there!

For my website, I’m trying to use my own fonts which I’ve uploaded using File Manager. I’ve tried the following code, to use 3 different fonts for different areas on my website:

@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;}
links{
	font-family:ClarendonLTStd-Light;}
h1{
	font-family:ClarendonLTStd;}
h2, h3, h4, h5, h6, h7{
	font-family:KasseFLF-Bold;}

Could anyone please help out and let me know what I’ve done wrong? 😮

Thanks you in advance!

Best regards,
Wouter

This topic was modified 6 years, 2 months ago by Steven Stern (sterndata).

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

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

HudsonValleyWebDesign
(@jaycbrf)

6 years, 2 months ago

Font names have to be in “quotation marks”

Michael
(@alchymyth)

6 years, 2 months ago

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…
Joy
(@joyously)

6 years, 2 months ago
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');
}
```
Thread Starter wsamvanderlinden
(@wsamvanderlinden)

6 years, 2 months ago
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 6 years, 2 months ago by wsamvanderlinden.
Michael
(@alchymyth)

6 years, 2 months ago
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.
Thread Starter wsamvanderlinden
(@wsamvanderlinden)

6 years, 2 months ago

@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