Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Font encoded in Base64

Font encoded in Base64

Scheduled Pinned Locked Moved General Discussion
7 Posts 2 Posters 1.1k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • paulstolleP
    paulstolleP
    paulstolle
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • RichardR
      RichardR
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear Paul @paulstolle

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

      http://laythemeforum.com/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

      1 Reply Last reply
      0
      • paulstolleP
        paulstolleP
        paulstolle
        wrote on last edited by paulstolle
        #3
        This post is deleted!
        1 Reply Last reply
        0
        • paulstolleP
          paulstolleP
          paulstolle
          wrote on last edited by
          #4

          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

          1 Reply Last reply
          0
          • RichardR
            RichardR
            Richard
            Global Moderator
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0
            • paulstolleP
              paulstolleP
              paulstolle
              wrote on last edited by
              #6

              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!

              1 Reply Last reply
              0
              • RichardR
                RichardR
                Richard
                Global Moderator
                wrote on last edited by
                #7

                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

                1 Reply Last reply
                0

                Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                With your input, this post could be even better 💗

                Register Login
                Reply
                • Reply as topic
                Log in to reply
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes


                Online Users
                I
                Ingi
                Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                laytheme.com
                • Login

                • Don't have an account? Register

                • Login or register to search.
                • First post
                  Last post
                0
                • Recent
                • Tags
                • Popular
                • Users
                • Search