Server Side Fonts?

help
1

Hello people,

I’m trying to implement a font that I’ve added to the project inside my public folder. It works beautifully with local (client side) only. But when a device accesses it from the server, the font doesn’t show (it defaults to times Roman).

I do understand why this happens, but I’m just looking for a way to export it so other devices adopt that particular font. How can I do that?

Thank you so much for your time.

My css has this in it

@font-face {

font-family: 'digital-7';

   src: url(‘/fonts/digital-7.ttf’);

}

And my HTML implementation looks like this

<p style="font-family:'digital-7'; color: white; font-size: 80px;"> example </p>
1 Like
2

Did you ever find a solution? I’m having the same issue.

I’m using

import InlineCss from 'react-inline-css';
import ReactDOMServer from 'react-dom/server';
import pdf from 'html-pdf';
import fs from 'fs';

via https://themeteorchef.com/tutorials/rendering-pdfs-with-react-components from @cleverbeagle

maybe @benjamn, server-side god, knows?

1 Like
3

I haven’t unfortunately :frowning: And it must be a silly query because i posted it into StackOverflow, and got 2 downvotes… I mean if it’s silly, then point me to the right direction please!

4

What do you mean by “when a device accesses it from the server”?
Do you mean any browser not on the developer’s computer?

What debugging method have you tried already?

5

Thank you for your response.

When I run my app through localhost, the font renders on my machine; I get the font appearing corrrectly, but if another device (say another computer in the same network) accesses my app using my I.P, the font does not render in that machine but rather defaults back to Times Roman.

6

I can’t find anything on it…

7

This works for me using html-pdf

const CEDARVILLE_URL = `${Meteor.absoluteUrl()}/fonts/Cedarville_Cursive/Cedarville-Cursive.ttf`

const INLINE_STYLES = `

@font-face{
  font-family: 'Cedarville Cursive';
  src: url('${CEDARVILLE_URL}');
}

//....

where that is [root]/public/fonts/Cedarville_Cursive/Cedarville-Cursive.ttf`

Works locally at least, we’ll see if it works hosted.

8

Your code look fine, so it should work. The reason it would work on localhost and not remotely is probably because you have the font installed on that computer, so the browser uses the system version rather than a webfont.

Does the font request show up in the network panel of dev tools?
When you inspect the element and look at computed properties (in chrome), what does it say at the bottom under ‘Rendered Fonts’?

Maybe convert the ttf to a woff and see if the browser picks it up?

9

After debugging on other browsers, I get this error on my console
"Slow network is detected. Fallback font will be used while loading"

Any idea on how to overcome this?

10

Serve the font from nginx or a CDN instead?

Not sure how to help from this error, sorry!

11

I get this error on my console "Slow network is detected. Fallback font will be used while loading

This is a bug in Chrome. You can get rid of it by disabling this option:

chrome://flags/#enable-webfonts-intervention-v2

or wait until Google publishes a bug fix.

1 Like