![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: background color, font weight
-
AuthorPosts
-
January 18, 2021 at 1:41 pm #1273329
Hello dear support team,
if have some few elements in my site which don’t work as expected.
These are:
– font weight 900 for h1 (avia main settings -> inline css!)
– background-color for colour sections over main content with background image (avia main settings -> inline css!)
Using the “inspector” function of the browser, my code is correct, but it doesn’t apply.
In the private content I give detailed information.
Thank you & regards,
AntonieJanuary 18, 2021 at 7:51 pm #1273436Hey Antonie,
Could you please attach some screenshots of the issue?
Looks like the font-weight 900 is not available for that font, the one available is 600. Do you need it to be 900?
Best regards,
VictoriaJanuary 18, 2021 at 10:20 pm #1273487Hello, Victoria,
how can I attach Screenshots in the post?
Regards, AntonieJanuary 18, 2021 at 11:47 pm #1273506January 19, 2021 at 11:52 am #1273647Hello,
I loaded the images in my dropbox and send you the link as Private Content.
I hope these images help you to understand my problem.
Best regards,
AntonieJanuary 20, 2021 at 11:53 am #1274001Why it is impossible to manage font weight as we would it?
January 20, 2021 at 7:09 pm #1274166Hello dear Support Team,
part of the problems I could figure out for myself:
1) I removed the background image in the “general styling settings” for the main content and set it for “#main” in my custom CSS. Now the semi-transparent background for the sections are working!!
2) Removing the “background-size: cover” for “.main_color” the background image for one of my sections also appears now!! Yay :-)Now my online problem left are the font weights as shown in the avia settings and the browser “inspector” – would great to get help!!!
Thank you very much.
AntonieJanuary 20, 2021 at 8:21 pm #1274186In quick css, i wrote :
h1 {
font-style: italic;
font-weight: 900 !important;
}
h2, h3 {
font-style: normal;
font-weight: 600 !important;
}
h4, h5, h6 {
font-style: normal;
font-weight: 400 !important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
text-transform: none;
}Then you can manage as you want weights…
January 20, 2021 at 9:42 pm #1274222Hello cyrilduval,
thank you. I also tried it with Quick CSS and “! important”, but it’s the same problem as via custom style.css: The Raleway Font doesn’t work with font weight 800 oder 900. If I understand Victoria right, the Raleway Font is not included with all existing styles in the Enfold Theme.The Problem is: The settings of the Avia Layout Architect allow to combine each font family with each font weight – and then in the front end you have the surprise
a) whether it’s existing AND
b) whether it’s embedded in the ENFOLD Theme.I started a new search in the support forum for the Raleway problem and found the solution to just upload missing styles via the Import-/Export-function of the Avia Layout Architect.
January 20, 2021 at 10:42 pm #1274234btw. just for info:
raleway is one of those google fonts that could be used with variable font option – if you are loading that font by yourself. Best would be to load it local.
Some nice info on that: https://web.dev/variable-fonts/if you have done that – it will be possible to have styles like:
f.e.h1 { line-height: 1.7em; font-size: 3.8em; font-variation-settings: "wght" 443; }
you can download this varialble font on google fonts: https://fonts.google.com/specimen/Raleway?query=Raleway – but these fonts are ttf fonts.
it is a little bit tricky to convert those downloadable files to woff2 fonts under preservation of those varialbe fonts options. But there are good converter tools in the net.Vimeo Video
in Action: https://webers-testseite.de/pureinstall/oswald/January 21, 2021 at 1:51 pm #1274371Hallo Günni, danke für Deinen Hinweis, das klingt sehr interessant, weil ich dann Raleway gar nicht in so vielen verschiedenen Styles laden muss.
Aber ich bin jetzt seit einer Weile vergeblich am Recherchieren und komme nicht weiter. Deshalb meine Frage: Könntest Du mir das bitte mal “für Dummies” erklären? Ich nutze den Google Webfonts Helper und kann damit auch woff2-Dateien erzeugen. Allerdings nur aus dem jeweils angewählten Schriftschnitt – mir ist also nicht klar, ob ich dann einfach die 400er-woff2 umbenenne in raleway-variable-woff2?
Dann die Einbindung:
Wenn ich diese in meinem Child-Theme in dieselbe Hierachie wie mein style.css anlege, im Head der style.css die Schrift lade mit
@font-face {
font-family: “Raleway”;
src: url(“raleway-variable.woff2”)
format(“woff2”);
}und dann in der style.css (wie von Dir angegeben):
h1 {
font-variation-settings: ‘wght’ 800 !important;
}
tut sich weiterhin nichts. Wäre toll, wenn Du weiterhelfen könntest. Vielen Dank!January 21, 2021 at 6:54 pm #1274502Nein – ist leider nicht so trivial.
Am Mac ( ist ja ohnehin quasi “Linux-Basiert”) einige Terminal Tools die wunderbar diese ttf unter einhaltung der variable Fonts generieren.
Die Zukunft wird wohl dahin gehen – man sollte allerdings ein Fallback für die ewig gestrigen bereit stellen.heißt man lädt schon auch die Schriftschnitte die man möchte ( zB: 300, 400, 700) und diese variablen Font als woff2
man macht dann sozusagen im quick css eine weiche ähnlich den media-querries.
wobei ich dann die Sachen via einer Klasse die ich einem Eltern Element zuweise setze z.B:hiervor kommen die normalen Definitionen wie üblich dann jedoch :
lies zB: http://clagnut.com/blog/2390/@supports (font-variation-settings: normal) { .raleway-var .av-special-heading-tag { font-family: 'Raleway Variable',sans-serif; font-variation-settings: "wght" 600; line-height: 2em; letter-spacing: 0.05em !important; font-style: normal; font-size: 3em; } .raleway-italic-var .av-special-heading-tag { font-family: 'Raleway Italic Variable',sans-serif; font-variation-settings: "wght" 600; line-height: 2em; letter-spacing: 0.05em !important; font-style: normal; /*** da es ja am Schriftschnitt schon als italic gesetzt ist ***/ font-size: 3em; } }
eingebunden werden die normalen Fonts und die variablen via z.B:
@font-face{ font-family:'Raleway Variable'; font-weight:100 900; src:url(../fonts/Raleway-VariableFont_wght.woff2) format('woff2') } @font-face{ font-family:'Raleway Italic Variable'; font-weight:100 900; src:url(../fonts/Raleway-Italic-VariableFont_wght.woff2) format('woff2') }
die 100 900 sind die Spanne mit der gesetzt werden kann.
nach dem Converter musst du mal Googlen variable ttf nach varialbe woff2 z.B
-
This reply was modified 3 years, 7 months ago by
Guenni007.
January 21, 2021 at 7:13 pm #1274506January 23, 2021 at 6:37 pm #1274993Sorry cyrilduval (it was to hard for me in English) and thank you again Guenni. But with the variable fonts I want to deal further along the time.
I solved my problem by uploading Raleway 800 as zip-Archive via the Import-Function of the Enfold Theme and then selected this font (last entry in the list) via Enfold Advanced Styling Settings.
As a suggestion to the Enfold Developers: It would be very helpful to see in the back-end which styles (weights) of a font are implemented and which are not. – Apart from that I am really happy with Enfold :-)
So all my problems in this post are solved.January 24, 2021 at 11:46 am #1275029Hi web-und-text,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoria -
This reply was modified 3 years, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.