Merge HTML, CSS, JS and Assets to one file

Question

I'm currently building a little experiment.

It's about having some sort of "emulator" written in C# that can run some "ROMs" that are programmed in HTML ( CSS, JS, .. ).

To build there ROMs, I've programmed a little "compiler" that is using my JS based game engine and it's editor to pack the game / application into a single file ( the "ROM" ) that is basically just an encrypted ( or plain ) JSON file that contains the full HTML code ( in one of its attributes ), except that linked files are directly written into it.

<script src="./script/main.js"></script>

will turn into:

<script> ...code... </script>

and the same with CSS.

Images will be turned into Base64 String

<img src="http://www.img.com/img.png"/>

becomes

<img src="data:image/png;base64, R0lGODlhmwD....."/>

My problem is, to include font files into the CSS or HTML file.

So maybe something like this

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01m1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}

becomes

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'), local('OpenSans'), url( ...magic... ) format('woff2');
}

Does anybody know if this is possible, and if so, how I can implement that functionality ?

Thank you for your suggestions.

@JamesThorpe was literally just writing that. beat me by seconds — atmd
– atmd, Commented Jan 28, 2015 at 15:04
I am currently looking for a tool that does what you describe, i.e. automatically put several sources into one html file. Do you have a solution that you can share? — mzuba
– mzuba, Commented Nov 25, 2021 at 11:20

KyleK · Accepted Answer · 2015-01-28 15:04:28Z

2

This should works:

@font-face{
 font-family: 'Open Sans';
 src: url(data:font/ttf;base64,AAEA… ) format('truetype');
}

Found here: http://blog.patdavid.net/2012/08/embedding-fonts-with-css-and-base64.html

answered Jan 28, 2015 at 15:04

KyleK

5,16920 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ace Over a year ago

Thank you for that. I didn't except the answer for this to be that simple :) Now I feel stupid,

Collectives™ on Stack Overflow

Merge HTML, CSS, JS and Assets to one file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related