Web page with custom font
Posted: Thu Feb 10, 2022 10:14 amAfter days of searching and a lot of trial and error, I've decided to ask the experts... In short, I'm trying to figure out how to pull in custom font files from LittleFS. My html has embedded CSS and its all within my code (not external files). However, I do need to include external custom font files. This is a snippet of the CSS code (in my html <head> section) that gets the font files:
While debugging, I copied the html/css into a stand-alone file and opened it with a browser and it worked perfectly. So my problem is that I don't know how to properly reference the font files from within the program.
I have verified that the font files have been uploaded (LittleFS). When I list the files, I get the following:
/audiowide-regular-webfont.svg
/audiowide-regular-webfont.ttf
/audiowide-regular-webfont.woff
/audiowide-regular-webfont.woff2
When I display the page from the program, all of the css formatting is there, but the font is not.
I tried adding serveStatic statements. It didn't produce any errors, but it didn't work, either:
I'm new at this so I feel like I'm missing something obvious. I'd appreciate a nudge in the right direction.
Steve
Code: Select all
<style type='text/css'>
@font-face {
font-family: 'audiowideregular';
src: url('/audiowide-regular-webfont.woff2') format('woff2'),
url('/audiowide-regular-webfont.woff') format('woff'),
url('/audiowide-regular-webfont.svg') format('svg'),
url('/audiowide-regular-webfont.ttf') format('truetype');
}
... more CSS stuff...
</style>
While debugging, I copied the html/css into a stand-alone file and opened it with a browser and it worked perfectly. So my problem is that I don't know how to properly reference the font files from within the program.
I have verified that the font files have been uploaded (LittleFS). When I list the files, I get the following:
/audiowide-regular-webfont.svg
/audiowide-regular-webfont.ttf
/audiowide-regular-webfont.woff
/audiowide-regular-webfont.woff2
When I display the page from the program, all of the css formatting is there, but the font is not.
I tried adding serveStatic statements. It didn't produce any errors, but it didn't work, either:
Code: Select all
server.on("/config", handleConfig);
server.serveStatic("/config", LittleFS, "/audiowide-regular-webfont.woff2");
server.serveStatic("/config", LittleFS, "/audiowide-regular-webfont.woff");
server.serveStatic("/config", LittleFS, "/audiowide-regular-webfont.svg");
server.serveStatic("/config", LittleFS, "/audiowide-regular-webfont.ttf");I'm new at this so I feel like I'm missing something obvious. I'd appreciate a nudge in the right direction.
Steve