Embed Google Fonts

[DevilsDesigns]

is there a way to embed google fonts using css inside jellyfin without having to add the actual files to the directory

[DevilsDesigns]

I attempted this but to no avail

/*Custom Font*/
<style>
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap') !important;
</style>

.teko-300 {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

h1, h2, h3 {
   font-family: 'teko-300', sans-serif; text-transform: uppercase;
}
h2, h3 {
   letter-spacing: .3px;
}

[BobHasNoSoul]

This is down to the content security policy being self (without recompiling the source the answer is no. But to get the fonts on the server is simple enough) I will write a simple bash script when I get home to do this for you.

On Mon, 20 May 2024, 15:47 DevilsCoder, @.***> wrote:

I attempted this but to no avail

/Custom Font/

.teko-300 { font-family: "Teko", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }

h1, h2, h3 { font-family: 'teko-300', sans-serif; text-transform: uppercase; } h2, h3 { letter-spacing: .3px; }

— Reply to this email directly, view it on GitHub https://github.com/BobHasNoSoul/jellyfin-mods/issues/21#issuecomment-2120612657, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFPTXLHTY6NNNEXC74PRATLZDIEHPAVCNFSM6AAAAABH726WOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRQGYYTENRVG4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[DevilsDesigns]

Praya17 did this on jellyskin using Netflix font

[BobHasNoSoul]

here is a css to paste in if you want it to work outside your server..

/*fixing your google font request not really an issue but here it is*/
/* devanagari */
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/teko/v20/LYjYdG7kmE0gV69VVPPdFl06VN9JG4S01zO0vg.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/teko/v20/LYjYdG7kmE0gV69VVPPdFl06VN9JG4S71zO0vg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/teko/v20/LYjYdG7kmE0gV69VVPPdFl06VN9JG4S11zM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.teko-300 {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
body, p {
   font-family: 'teko-300', sans-serif; text-transform: uppercase;
}
h1, h2, h3 {
   font-family: 'teko-300', sans-serif; text-transform: uppercase;
}
h2, h3 {
   letter-spacing: .3px;
}

however note these will only work while the original remains intact and the actual font is availible to your clients not your server.

important to distinguish that this version does not send it to import a url to import another url via css

and there should be no