Installing non-standard fonts

  • I’ve followed instructions here to install non-standard fonts, uploading the font.ttf file to my server and adding this to the styles.css in my child theme:

    @font-face {
	font-family: UtopiaStd;
	src: url('/wp-content/themes/opti-child/UtopiaStd-Regular.otf');
}

    However changing the fonts in the theme’s styles.css to the new font family does nothing, it just defaults back to the default font for the system.

    Any ideas?

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

  • Site URL Please?

    Thread Starter atimes2015

    (@atimes2015)

    Its a demo site, not live yet, I’m working on the theme still.

    Thread Starter atimes2015

    (@atimes2015)

    So it is not possible to use non-standard fonts with WordPress?

    Thread Starter atimes2015

    (@atimes2015)

    ?

    Check the path that the fonts file is being linked to. Web fonts can be… problematic… from time to time.

    The first thing that stands out ot me is that the URL for the file would not normally include the /wp-content/theme-name/, so it would be uset this:

    @font-face {
	font-family: UtopiaStd;
	src: url('UtopiaStd-Regular.otf');
}

    URL’s in CSS work a bit differently to URL’s in HTML pages. In a stylesheet like this, the image URL is relative to that stylesheet.

    The second part is that every time I’ve used a web font that’s been converted from a standard font there’s been a lot more files than just that. There’s a very good chance that your browser doesn’t like ..otf font files and won’t load it because it’s not in a format that it can use.

    Thread Starter atimes2015

    (@atimes2015)

    Ok, thanks for that – I did try with the full URL also which didnt work either. I’ve used Open Google fonts now which seem to play better.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Installing non-standard fonts’ is closed to new replies.