Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

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

    Bug Reports
    2
    11
    762
    Loading More Posts
    • 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.
    • N
      neunzehnachtneun last edited by neunzehnachtneun

      Hey all!
      I just have found a minor bug using Laytheme with Firefox.
      While bold fonts are displayed in Safari and Chromium, they're not in Firefox. What do you think? Is this a theme issue or rather a firefox issue?
      You can find some examples here: https://www.neunzehnachtneun.de/
      Used fonts are: LiberationSerif, LiberationSans, LibertinusSerif, Helvetica in 18px.

      Cheers,
      Sebastian

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

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

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • N
          neunzehnachtneun last edited by

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

          Best,
          Sebastian

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            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 Reply Quote 0
            • N
              neunzehnachtneun last edited by

              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 Reply Quote 0
              • N
                neunzehnachtneun @neunzehnachtneun last edited by neunzehnachtneun

                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 Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  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 Reply Quote 0
                  • N
                    neunzehnachtneun last edited by neunzehnachtneun

                    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 Reply Quote 0
                    • N
                      neunzehnachtneun last edited by

                      This post is deleted!
                      1 Reply Last reply Reply Quote 0
                      • N
                        neunzehnachtneun last edited by

                        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 Reply Quote 0
                        • mariusjopen
                          mariusjopen Global Moderator last edited by

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

                          Best!

                          Marius

                          www.mariusjopen.world

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post

                          Before you post

                          Use the Search Feature. Maybe there is already a solution to your issue.

                          1. Update Lay Theme and all Lay Theme Addons
                          2. Disable all Plugins
                          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                          4. Now see if your problem solved itself
                          5. Go here, see if your problem is listed here:
                          Troubleshooting

                          When you post:
                          1. Post a link to where the problem is
                          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                          Thanks!

                          Online Users

                          A
                          B
                          C
                          F

                          Recent Topics

                          • K

                            Unable to update lay theme / to login wp admin

                          • S

                            Theme crashed - because of Polylang?

                          • A

                            New button feature not available

                          • A

                            carousel addon not working after update

                          laytheme.com