CODEWITHSUNDEEP
phpcsswordpressfontsfont-face
Mike.Whitehead
Mike.Whitehead

Reputation: 818

Wordpress - adding a custom font via font-face

I've built a front-end site which I'm now uploading to wordpress using the html5blank theme. I've never uploaded a custom font file before and I think I'm getting the file path wrong. The font-files are in a fonts folder in my child theme folder. This is how I have my code -

style.css

@font-face {
    font-family: 'Gotham-Light';
    src: url('/fonts/Gotham-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

I've also put this in my header.php (not sure it's required) -

 <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/fonts/Gotham-Light.otf" />

How do I show the correct path if that's what the issue is? Can it be relative or does it need to be absolute?

Upvotes: 1

Views: 2466

Answers (3)

user379888
user379888

Reputation:

You need the address of font file not the stylesheet.

 <link rel="stylesheet" href="<?php echo get_template_directory_uri('/fonts/Gotham-Light.otf') ?>/fonts/Gotham-Light.otf" />

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

You are using an absolute path in your @font-face here:

src: url('/fonts/Gotham-Light.otf') format('opentype');

The / at the start means that its looking for the font in the webroot.

Assuming your style.css is in your child theme folder and fonts is a subfolder of that, try this (i.e. without the / at the start):

src: url('fonts/Gotham-Light.otf') format('opentype');

Upvotes: 5

DaFois
DaFois

Reputation: 2223

This should work, just put the font inside a folder named fonts in your theme directory.

@font-face {
font-family: 'gothamlight';  
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Gotham-Light.otf);  
font-weight: normal;
font-style: normal;

}

Upvotes: 0

Related Questions