Font encoded in Base64

paulstolle · wrote on Jan 29, 2021, 12:50 AM

Hi there,

I just bought a font which is already encoded in Base64 to add on any website.

The foundry provided me a font.css like this:

@font-face {
  font-family:'FONT_NAME';
  src: url(data:application/font-ttf;charset=utf-8;base64,BASE64_STRING) format('truetype');    
  font-weight: normal;
  font-style: normal;
}

How should I handle this the best way?

Thanks a lot!
Paul

Richard · wrote on Jan 29, 2021, 6:34 AM

Dear Paul @paulstolle

Hoping that some of the content in this thread can help you:

http://laythemeforum.com:4567/topic/917/activate-styllistic-sets/2

@font-face is normally place within the style.css document of a website and you give it a font-family name ('font-name') now that its loaded, it can be called upon throughout the website and used for text by addressing the name:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Best wishes
Richard

paulstolle · Jan 29, 2021, 9:16 AM

This post is deleted!

paulstolle · wrote on Jan 29, 2021, 10:56 PM

Thanks a lot @Richard-K!

So I placed my font right into Lay Options -> Custom CSS & HTML -> Custom <head> content like this:

<style> 

@font-face {
    font-family: 'Wasa-r';
    src:url(data:font/truetype;charset=utf-8;base64,T1RUTwA…
    format('truetype');
    font-weight: normal;
    font-style: normal;
}

</style>

Under Custom CSS I placed this line of code:

div, span, p, a, h1, h2, h3, h4, h5, h6, h7 { font-family: Wasa-r !important;}

(Without !important it's not changing all properties on my site.)

Right now it's working but I've found no way to change the font-style in Text Formats visibly (all changes there are working but without preview).

Is this way bulletproof or did I missed a point? Should I install the font via <script> tag and CSS under Lay Options -> Webfonts to make it more resistant?

Would be happy about further help from you!

Thanks a lot,
Paul

Richard · wrote on Feb 2, 2021, 5:04 AM

Dear @paulstolle

So its working in general? Thats great :)
But you have issue with it providing a preview in text formats?

Does it work on the Front-end ( your website? )

best wishes
Richard

paulstolle · wrote on Feb 2, 2021, 10:42 PM

Dear @Richard-K

Yeah, it's working in general. I can also adjust things in Text Formats but there is no preview of the actual font in there.

However, now I got the .woff2 files and everything is fine. But maybe this topic will help somebody else?

Thanks a lot for your support and all the best!

Richard · wrote on Feb 2, 2021, 11:16 PM

Dear @paulstolle

Great, this will definitely help someone in the future - i have it saved as a thread to help with this topic :)

Thank you Paul and hope you have a lovely week

Sincerely
Richard

Lay Theme Forum

Font encoded in Base64

Before you post:

When you post:

Online Users