-
Posts
-
Ich habe für meine Website (Template “Freelancer”) die Open_Sans,Pacifico.zip hochgeladen. Wenn ich diese lokalen Schriften dann im Allgemeinen Styling zuordne, erscheint im Frontend die Open Sans (body) als condensed. Auch wenn ich im Erweiterten Styling die Schriftdicke auf 400 stelle ändert das nichts (was ja zugegebenermaßen auch nichts mit der Schriftbreite zu tun hat).
Wie kann ich die Schrift wieder auf eine “normale” Schriftbreite einstellen, so wie sie erscheint, wenn die OpenSans direkt von Google eingebunden wird?
Die Pacifico wird korrekt dargestellt. Die ist allerdings auch keine VariableFont.Danke für eure Hilfe.
Hey Alex,
Thank you for the inquiry.
The font seems to be displaying correctly on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot.
If you need to adjust the letter spacing, try to add this css code:
p { letter-spacing: 0.1em; }Result:
Best regards,
IsmaelThank you for your answer. I don’t want to adjust the letter spacing, that’s ok.
I prepared a few screenshots for you. I hope you see the difference of the green and orange marked text. In the last pic I tried the real “condensed” font which is way more narrow than the (from me) supposed condensed.
The question is, if I have to choose the uploaded font only in “Allgemeines Styling / Schriften” or also in the “Erweitertes Styling” at the single elements, that the website uses only the uploaded fonts?Font too narrow
Font ok, but Google online font
only heading too narrow
How it has to bee, but Google online font
the real condensed, just for comparison
Hi,
Thank you for the screenshots.
The body font is still set to Open Sans when we checked, instead of Open Sans Condensed. Try to adjust the Font for Your Body Text setting in the Enfold > General Styling > Fonts panel. Let us know the result.
Best regards,
IsmaelIn this context, I would like to ask you a general question. The following picture shows what happens when you uploaded the font.
If I want to use variable fonts, I upload static and variable fonts in separate ZIP files.
and:
You can then use the variable font style only for your page and, as the name suggests, define the weight and width variables for Open Sans, for example. There are predefined settings internally. So, if you are still using the old designations, such as ‘Condensed Semibold’ then would be wght: 600; wdth: 75%
This means that the font is rendered as font-weight:600 and the letters would be 75% wide.In the meantime, it seems to be justifiable to use only the variable font.
However, if you only need a few font styles, it may be more performant to upload only the few static font styles. For example, just one zip file containing only OpenSans 300, 400 and 700. With many fonts, the italic font rendered by the browser differs only slightly from the dedicated italic font (this is mainly the case with serif fonts)PS: So my advice is. Upload only the varialbe font. Make sure that the woff2 files are included in the zip. They are even smaller as a file and are rendered faster by the browser.
And here is the problem: Google only offers ttf as font files. I created with a comandline tool the ttf to woff2 files:
OpenSans-Variable.zipbtw: using variable fonts can be very interesting – but there are a lot of new css declarations to know – see here a playground:
https://variablefonts.io/about-variable-fonts/Wenn du also doch lieber mit einem selbstgehosteten OpenSans arbeiten möchtest. Dann sag bescheid – welche Schriftschnitte du brauchst, dann lade ich das file auch hoch.
PPS: übrigens OpenSans ist ja noch harmlos, RobotoFlex ist ein Super Variabler Font mit mehreren Axen die bedient werden können:
Firefox (Developer Version) hat für Schriftarten einen eigenen Reiter, an dem man herumspielen kann mit diesen Einstellungen. Wenn man dann mit dem Resultat zufrieden ist, geht man zurück zum Regelsatz, und kann sich das als css heraus kopieren:
(das Element für das du dann rumgespielt hast, muss dann noch durch den eigentlichen Selektor ersetzt werden)Element { font-size: 140px; line-height: 1.1em; letter-spacing: 5px; font-weight: 612; font-stretch: 113%; font-variation-settings: "opsz" 8, "GRAD" 87; font-style: oblique 7.45deg; }Thank you for your efforts and assistance. Also for the zipped font file!
I have now uploaded only the required static fonts. Everything is now working properly!
@Ismael: I never wanted the Condensed font, so I did not set it.One last question (in this case ;-): If I were to use a variable font, where would I need to insert the CSS snippet? Can I do this in Quick CSS?
you can upload that font-file in a separate zip. i offered it here : https://webers-testseite.de/OpenSans-Variable.zip
you can choose it the same way as the static font on the bottom of that dropdown list.
- You must be logged in to reply to this topic.