Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • 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. Bug Reports
  3. [Solved] How to add a font family locally using webfonts and css

[Solved] How to add a font family locally using webfonts and css

Scheduled Pinned Locked Moved Bug Reports
11 Posts 2 Posters 1.3k Views
  • 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.
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen
    Global Moderator
    wrote on last edited by
    #2

    Dear @neunzehnachtneun
    is the Helvetica the default font by LayTheme or did you upload it?

    Best!

    Marius

    www.mariusjopen.world

    1 Reply Last reply
    0
    • N Offline
      N Offline
      neunzehnachtneun
      wrote on last edited by
      #3

      Hi @mariusjopen ,
      Helvetica is one of the default fonts, the other ones are uploaded.

      Best,
      Sebastian

      1 Reply Last reply
      0
      • mariusjopenM Offline
        mariusjopenM Offline
        mariusjopen
        Global Moderator
        wrote on last edited by
        #4

        Dear @neunzehnachtneun
        in this case I would try to upload the helvetica and see if the problem remains.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply
        0
        • N Offline
          N Offline
          neunzehnachtneun
          wrote on last edited by
          #5

          Dear @mariusjopen
          actually I don't unterstand your suggestion. Could you please explain?
          Because the problem seems to manifest independently of the used fonts but only when using firefox, in my opinion it doesn't be to be a problem of the font.

          Best,
          Sebastian

          N 1 Reply Last reply
          0
          • N neunzehnachtneun

            Dear @mariusjopen
            actually I don't unterstand your suggestion. Could you please explain?
            Because the problem seems to manifest independently of the used fonts but only when using firefox, in my opinion it doesn't be to be a problem of the font.

            Best,
            Sebastian

            N Offline
            N Offline
            neunzehnachtneun
            wrote on last edited by neunzehnachtneun
            #6

            Dear @mariusjopen
            maybe I found the problem, which leads to another question:
            Until now, I uploaded just the regular font type and not the whole family. I guess, adding the whole family with also the bold type and combining them right together, could solve the issue.
            Unfortunately this fonts field is totally new to me, so I do not know how to upload all types of one font family and how to tell laytheme and wordpress, that these fonts are a family. I assume, that it'll have something to do with css3, so maybe you or someone else can provide some assistance.
            Thanks in advance!

            Best,
            Sebastian

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #7

              Dear @neunzehnachtneun
              yes. You should upload all the font-weight which you want to use.
              There is not a font-file for the whole family.
              You need to upload them all by one.

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • N Offline
                N Offline
                neunzehnachtneun
                wrote on last edited by neunzehnachtneun
                #8

                Thank you @mariusjopen
                I just uploaded a few font files and now i am playing with the style.css. Following lines are added, but the font isn't displaying. Neither in the editor nor in the text formats.
                May you take a look? Do you see a mistake I made?

                Best,
                Sebastian

                Ps. I also tried: src: url('/web/wp-content/fonts/LinBiolinum_R.woff') format('woff');
                Pps: Just added the custom lines to Lay options -> Custom CSS & HTML instead of the style.css. Unfortunenately with no effect.

                -- style.css
                @font-face {
                font-family: 'Linux Biolinum'; /* normal */
                src: url('https://www.neunzehnachtneun.de/wp-content/fonts/LinBiolinum_R.woff') format('woff');
                font-weight: normal;
                font-style: normal;
                }

                @font-face {
                font-family: 'Linux Biolinum'; /* italic */
                src: url('https://www.neunzehnachtneun.de/wp-content/fonts/LinBiolinum_RI.woff') format('woff');
                font-weight: normal;
                font-style: italic;
                }

                @font-face {
                font-family: 'Linux Biolinum'; /* bold */
                src: url('https://www.neunzehnachtneun.de/wp-content/fonts/LinBiolinum_RB.woff') format('woff');
                font-weight: bold;
                font-style: normal;
                }

                1 Reply Last reply
                0
                • N Offline
                  N Offline
                  neunzehnachtneun
                  wrote on last edited by
                  #9
                  This post is deleted!
                  1 Reply Last reply
                  0
                  • N Offline
                    N Offline
                    neunzehnachtneun
                    wrote on last edited by
                    #10

                    Hi @mariusjopen and @arminunruh !
                    I just found a solution I want to share. Just in case, somebody else is a css newbie too and also runs into this problem.

                    First I uploaded the whole font family as *.woff into a subfolder of wp-content called fonts. After this I created a font.css for every font family. To stick with the above example I did this for Linux Biolinum and filled the file with the code you see in my previous comment. Third, and this is really important, I added this css to my laytheme instance using the webfont uploader and a bit more specific the add by link and css module. After saving the new font, it is available as family in the editor.

                    Cheers!
                    Sebastian

                    1 Reply Last reply
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #11

                      Dear @neunzehnachtneun
                      ah! Cheers! Thank you for sharing!

                      Best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      arminunruhA
                      arminunruh
                      G
                      Glyph
                      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