Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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,
    Antonie

    #1273436

    Hey 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,
    Victoria

    #1273487

    Hello, Victoria,
    how can I attach Screenshots in the post?
    Regards, Antonie

    #1273506

    Hi,

    You can use the following service:

    https://snipboard.io/

    Best regards,
    Jordan Shannon

    #1273647

    Hello,
    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,
    Antonie

    #1274001

    Why it is impossible to manage font weight as we would it?

    #1274166

    Hello 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.
    Antonie

    #1274186

    In 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…

    #1274222

    Hello 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.

    #1274234

    btw. 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/

    #1274371

    Hallo 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!

    #1274502

    Nein – 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, 9 months ago by Guenni007.
    #1274506

    #1274993

    Sorry 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.

    #1275029

    Hi web-und-text,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.