When using an HTML String and not a URL, how can i use custom fonts

[tomerb15]

Hey @brenden, Great Module! ! !

I was wondering if there is a way to use fonts on my node server (lets say under /fonts/myFont.ttf) together with an HTML String that i build on the server. (No URL's to an external site, just HTML that i generate on the fly)

Thanks!

[dcohenb]

add a style tag to the html and define the styling in it, it seems to work just fine

[tomerb15]

Thanks @dcohenb , How should i define the path to the fonts which are locally in the project?

[dcohenb]

Well one way is to give an absolute location of the font i.e.:

<style>
@font-face {
    font-family: MyFont;
    src: url('http://localhsot:3000/assets/fonts/MyFont.otf');
}

.cls {
    font-family: MyFont;
}
</style>
<div class="cls">My awesome font!</div>

I have the same issue at the moment and i'm think of hosting the font on S3 And serving it from there. trying to fix the CORS issue right now.

[tomerb15]

what about using "file://"? It worked great with the <img src="file://path/to/image">

[dcohenb]

file://?! i think you're doing something wrong there... although i don't really know what is it you're trying to build and in what context it will work

[tomerb15]

I had local images i wanted to show in the HTML, the server is listening to 1 specific URL and nothing else, therefore using "http://localhost...." like you offered is not an option. the only thing that eventually worked was to use the "file://" protocol for the <img>'s 'src' attribute.

[dcohenb]

Are you building something that's suppose to run in the web eventually?

[tomerb15]

Nope, Believe it or not its possible :)

Since its not public yet, i can't elaborate at the moment.

[dcohenb]

I Believe you, it's just that using the file protocol is not something you should do. the protocol has been declared obsolete as you can read on Wikipedia - file URI scheme

[tomerb15]

so how do you suggest i tell Phantom/webShot to use a local image/font inside my HTML String?

[dcohenb]

Well again i don't know what you're trying to achieve but if you only work locally you can use the node packages http-server or serve to run a local server on the folder containing the assets and then you can access them via http://localhost:PORT/assets.....

usage is very simple, for example http-server is as follows: install it using npm i -g http-server then open a command line / shell in the folder containing the assets and run http-server then your assets will be available at http://localhost:8080/YOUR_FILES... (8080 is http-server's default port)

[tomerb15]

Hey @dcohenb , I tried your approach:

<style>
@font-face {
    font-family: MyFont;
    src: url('http://localhsot:3000/assets/fonts/MyFont.otf');
}

.cls {
    font-family: MyFont;
}
</style>
<div class="cls">My awesome font!</div>

But it didn't work. I verified that the link to the font downloads the font, but still the browser doesn't seem to use this font. The question is if WebShot will understand what I'm trying to do although the browser didn't accepts the syntax? BTW, I'm using a .ttf font and i tried with the format("true-type") as well

[dcohenb]

could it be because you ha e a typo in the url? if not.. maybe you need to allow CORS

[tomerb15]

Its working with WebShot but doesn't work with the browser and since i don't need it to work in the browser, your solution is good enough :)