Unable to display right font

[wwwerbeagentur]

Hi guys,

I’m trying to use a custom font on my page. I used this code in the Options-CSS:

@font-face {
font-family: ‘HelveNeuUltLig’;
src: url(’/sftp://[email protected]/wp-content/fonts/HelveNeuUltLig.ttf’) format(‘truetype’)
}

But the pages still displays a system font.

Thank you for your help.

[jade]

Hi there,

Please try to replace this line sftp://[email protected] with the URL of the site.

In case the issue persists, please provide us with the url of your site so that we can check it.

Thank you.

[wwwerbeagentur]

sadly that doesn’t help.
This is the url: https://maler-schrimpf.de/

I wanted the headlines to be in “Helvetice Neue” ultra light- (100) and the body text in regular (400).

Thank you for the fast response

[jade]

Hi there,

You can add custom fonts to your website using CSS3 @font-face rule. To do this, please review this article.

Basically you need to add the following code in your child theme’s style.css file (if you haven’t installed a child theme, please visit this):

@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');
}

Replace MyWebFont with the name of your font, path-to-your-font-directory with your fonts directory URL (e.g, http://yourwebsite.com/fonts) and font_name with your font’s name.

Next, whenever you need to use this font, simply use “MyWebFont” (or your custom font name), e.g:

body {
   font-family: 'MyWebFont', sans-serif;
}

Hope this helps.

[wwwerbeagentur]

Hi Jade,

i tried it this way. I don’t know why, but it still doesn’t work.
I thought maybe the font is broken and tried it with another

@font-face {
  font-family: 'RobotoCondensedLight';
  src: url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.eot');
  src: url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
       url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.woff') format('woff'),
       url('https://maler-schrimpf.de/wp-content/wp-content/fonts/RobotoCondensed-Light.ttf')  format('truetype'),
       url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.svg#svgFontName') format('svg');
}

  body {
   font-family: 'RobotoCondensedLight', sans-serif;
}

There is absolute no change in the displayed font on the page.

Do you have any idea, what the problem is? I’m at my wits end.

[paul.r]

Hi,

Since you are adding Light, you need to add the font weight too.

eg.

@font-face {
  font-family: 'RobotoCondensedLight';
  src: url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.eot');
  src: url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
       url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.woff') format('woff'),
       url('https://maler-schrimpf.de/wp-content/wp-content/fonts/RobotoCondensed-Light.ttf')  format('truetype'),
       url('https://maler-schrimpf.de/wp-content/fonts/RobotoCondensed-Light.svg#svgFontName') format('svg');
   font-weight: 300;
   font-style: normal;
}

  body {
   font-family: 'RobotoCondensedLight', sans-serif;
    font-weight: 300;
}

Hope that helps.