Uploading local (non-Google) fonts

[Ben]

Hi,

I’ve been trying to upload TTNormsPro-Bold (which I purchased as a webfont from MyFonts) as a local font on my site. I’ve gone through the steps here.

Since it’s non-Google, I tried to adjust the CSS from @font-face manually to include the specific URL path for the font (which I read in another topic somewhere for non-Google fonts).

I’ve got this:

/* TTNormsPro-Bold */
@font-face {
font-family: ‘TT’NormsPro-Bold;
src: local(‘TTNormsPro-Bold), local(‘TTNormsPro-Bold’),
url(‘http://staging3.enrola.co.uk/wp-content/uploads/2020/11/TTNormsPro-Bold.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘http://staging3.enrola.co.uk/wp-content/uploads/2020/11/TTNormsPro-Bold.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

(I was only sent .woff and .woff2 files, so I assume I can’t go for “Best Support”)

Is this correct? It’s not rendering in Chrome, but does seem to be in Firefox (Safari won’t let me view my Staging site).

The site is staging3.enrola.co.uk

[David]

Hi there,

can you make sure that any of your code does not contain curly quotes ie. ‘ – they should all be: '

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ben]

Hi David,

Thanks for coming back to me. I did check that, and I actually uploaded the following into Simple CSS after editing:

/* TTNormsPro-Bold */
@font-face {
font-family: ‘TTNormsPro-Bold’;
src: local(‘TTNormsPro-Bold’), local(‘TTNormsPro-Bold’),
url(‘http://staging3.enrola.co.uk/wp-content/uploads/2020/11/TTNormsPro-Bold.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘http://staging3.enrola.co.uk/wp-content/uploads/2020/11/TTNormsPro-Bold.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I think it still isn’t working though 🙁

[David]

I am seeing the .woff file is being requested, but the .woff2 is not found – can you confirm the ULR/font name is correct and that font file is uploaded.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ben]

Hi David,

Quite right – I hadn’t uploaded .woff2

I’ve done that now and I think it’s working. Thank you!

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts