[Solved] How to add a font family locally using webfonts and css
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
Dear @neunzehnachtneun
is the Helvetica the default font by LayTheme or did you upload it?
Best!
Marius
Hi @mariusjopen ,
Helvetica is one of the default fonts, the other ones are uploaded.
Best,
Sebastian
Dear @neunzehnachtneun
in this case I would try to upload the helvetica and see if the problem remains.
Best!
Marius
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
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
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
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;
}
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
