upload html font from SD

Other Hardware Storage
1

Hello,

I would like to upload fonts to my web. I storage abugslife.ttf on the SD card and i'm trying this:

<style>
@font-face {
    font-family: Bugslife;
    src: url(abugslife.ttf);
}
</style>

and here the arduino code:

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>


byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 1, 177);
EthernetServer server(80);
File webFile;


void setup() {
  
  Ethernet.begin(mac,ip);
  server.begin();
  while(!SD.begin(4)) delay(10);
  
}


void loop() {

  EthernetClient client = server.available();
  if (client) {
    
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        if (c == '\n' && currentLineIsBlank) {
	  webFile = SD.open("html.txt");
          while (webFile.available()) client.write(webFile.read());
          webFile.close();
          break;
        }
        if (c == '\n') {
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
  }
}

works fine on pc, but not in arduino.

i also tryed a direct download link (from google drive) and write it on the url.

<style>
@font-face {
    font-family: Bugslife;
    src: url(http://....);
}
</style>

but doesnt work on pc and doesnt work on arduino.

Does someone know a solution? thanks a lot!

2

My web server code will download css files. With only a small modification it should also download ttf files ok. However, it only works with 8.3 file names, and abugslife is 9 characters. Shorten the file name to bugslife.ttl and it should work.
http://playground.arduino.cc/Code/WebServerST

Some references say it is "application/octet-stream", but others say "application/x-font-ttf". I would try the x-font-ttf first. If it doesn't work, try the octet-stream. Add the line below to my server code and put the bugslife.ttf file on the SD card.

                // send Content-Type
                if(strcmp(fileType,"HTM") == 0) strcat_P(tBuf,PSTR("text/html"));
                else if(strcmp(fileType,"PHP") == 0) strcat_P(tBuf,PSTR("text/html"));
                else if(strcmp(fileType,"TXT") == 0) strcat_P(tBuf,PSTR("text/plain"));
                else if(strcmp(fileType,"CSS") == 0) strcat_P(tBuf,PSTR("text/css"));
                else if(strcmp(fileType,"GIF") == 0) strcat_P(tBuf,PSTR("image/gif"));
                else if(strcmp(fileType,"JPG") == 0) strcat_P(tBuf,PSTR("image/jpeg"));
                else if(strcmp(fileType,"JS") == 0) strcat_P(tBuf,PSTR("application/javascript"));
                else if(strcmp(fileType,"ICO") == 0) strcat_P(tBuf,PSTR("image/x-icon"));
                else if(strcmp(fileType,"PNG") == 0) strcat_P(tBuf,PSTR("image/png"));
                else if(strcmp(fileType,"PDF") == 0) strcat_P(tBuf,PSTR("application/pdf"));
                else if(strcmp(fileType,"ZIP") == 0) strcat_P(tBuf,PSTR("application/zip"));

// add this line for true type font file
                else if(strcmp(fileType,"TTF") == 0) strcat_P(tBuf,PSTR("application/x-font-ttf"));

                else strcat_P(tBuf,PSTR("text/plain"));
3

Hi again.

I've been trying for i while but i'm a bit lost. I really don't know where i have to put your code. I must copy all into my program? Do i have to download ethernet2 library? Could you make me and example on the code i have?

I'm a bit newbie... :sweat_smile: Thanks for your time

4

Do you understand how web servers and clients work?

The web client will request a page from the server. That page will have other files listed in it that it requires to display the page, like image, javascript and css files. The web client will request those pages after it finishes downloading the requested page from the server.

Your server must determine which files the client is requesting and return the correct file. Does your sketch do that?

5

EDIT: took me a lot of time... did work!!!!!! didin't saw that i must call the home page index.htm

worked with application/x-font-ttf. I learned a lot today. THANKS THANKS THANKS A LOT :smiley:

this is what serial gives back:

Client request #2: GET /bug.ttf HTTP/1.1
file = /BUG.TTF
file type = TTF
method = GET
params =
protocol = HTTP/1.1
SD file
filename format ok
SRAM = 6684
file found..opened..send..closed
disconnected

6

That looks like the correct output also. Good deal. :slight_smile: