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.2k 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.
  • N Offline
    N Offline
    neunzehnachtneun
    wrote on last edited by neunzehnachtneun
    #1

    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
    0
    • 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
                        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