Hello Guenni007,

I find that hosting Google Fonts locally, especially the variable fonts option, very complicated.

I spend a lot of time on this last days and came to the following conclusions:

– From a performance point of view its is better to not host Google Fonts locally. Yes, you will have 2 3th party connections less, but the page size is bigger when I host the fonts locally. For example around 285KB for Open Sans variable, while using Google’s CDN it is just around 44KB because Google uses a smart way to deliver the perfect font based on the user agent of the browser.

– I also found that my Web Vitals score is better when I use Google CDN instead of hosting locally.

So hosting Google fonts locally just for performance reasons seems not to be worth the effort, unless maybe when you use a lot of different fonts/styles.

Of course, from a legal point of view (GDPR) it might be the only option to host Google fonts locally. However, as far as I know using Google fonts is not forbidden yet in the EU (I live in the Netherlands). Maybe things will change in the near future, I don’t know.

it is easier to shift the button a littel to more distance from the bottom – and maybe on that case a less font-size.

Well this is correlated to a class that is set automatically on ampersand character.
the class is set to:

.special_amp {
  font-family: "Baskerville", "Palatino Linotype", "Palatino", "Times New Roman", serif;
  font-style: italic;
  font-size: 1.3em;
  line-height: 0.5em;
  font-weight: normal;
  color: inherit;
}

but that function is on functions-enfold.php line 970ff : avia_ampersand
so if in content an ampersand is set it will be changed to : <span class='special_amp'>&</span>

I have kind of find a solution!

I started from zero following these instructions again:
https://kriesi.at/support/topic/loading-google-fonts-locally-for-gdpr-compliance/

However, instead of using Font Squirrel to convert the .ttf file to woff and woff2 files I used this tool:

I uploaded the woff and woff2 files again, just with the Enfold Custom Font Manager, and now when you take a look at https://www.option-webdesign.nl the variable font can be changend from 300 to 800 in 1 steps, so 300-01-302… and so on. The variable font is working!

However, I do have 2 questions left:

– It seems that after all the only issue here was using Font Squirrel?

– I now have a file size of 274kKB for my Open Sans variable font:
https://www.option-webdesign.nl/wp-content/uploads/avia_fonts/type_fonts/opensans/opensans-variablefontwdthwght.woff2

Is that the normal font size for the Open Sans variable font? Maybe Guenni007 can answer that for me?

Thanks a lot :)
Alwin

it is much easier to select such elements if they were separated only in one surrounding container.
Means if they were alone f.e. in one color-section. – next we do not need on grid-layout or on flex-layout the need to set same height option – we can do that on different ways.
It is alway a good practice to have for special solutions a unique selector – means f.e. a unique ID or class on that surrounding container.

so now let all as it is and put this to your child-theme quick css:

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .av-flex-placeholder {
  display: none !important
} 

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
  display: grid !important;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
} 

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column {
  width: unset !important;
  margin: 0 !important
} 

@media only screen and (min-width:560px) and (max-width: 989px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  } 

  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table > .flex_column:nth-of-type(n+6) {
    left: calc(50% + 10px) /*** just if you like to center last 2 items *****/
  }
}

@media only screen and (min-width:320px) and (max-width: 559px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  } 
  
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column:last-of-type  {
    left: calc(50% + 5px) /*** just if you like to center last item *****/
  }
  
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column p {
    font-size: 17px;
    line-height: 24px
  } 
}

@media only screen and (max-width: 319px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table  {
    display: grid !important;
    grid-template-columns: 1fr; 
    gap: 10px;
  }   
}

5 to 3/2 to 2/2/1 screen sizes lower than 320px will end in 1 column layout.
just shrink your window size to see what happens on responsive case.

so – zunächst – bitte nicht bei den Enfold Optionen unter “Main Menü” die Option : “Append Search Icon To Main Menu” auswählen. Das wäre dann nämlich die Lupe.

Wie oben beschrieben das in die child-theme functions.php:

add_shortcode('avia_search', 'get_search_form');

function avf_add_search( $items, $args ){
  if ($args->theme_location == 'avia'){
	  $search = '<li id="menu-item-search" class="menu-item menu-search menu-item-top-level">';
	  $search .= do_shortcode('[avia_search]');
	  $search .= '</li>';
    $items =  $items . $search;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'avf_add_search', 10, 2 );

und das hier in das quick css:

.av-main-nav-wrap > ul:first-of-type {
  display: inline-flex !important;
  height: 100%;
}

#menu-item-search {
  line-height: 30px;
  position: relative;
}

#menu-item-search #searchform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  line-height: 40px;
}

#top #searchform > div:first-of-type {
  position: relative;
  max-width: 200px;
  opacity: 1 !important;
  display: block !important;
}

#menu-item-search #searchform #s {
  padding: 10px 40px 10px 5px;
  font-size: initial;
  background-color: rgba(255,255,255,0.85);   /*** if you like to have transparency ***/ 
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  top: 45px;
  padding: 10px 0;
  width: 100%;
}

hier kannst du sogar alle Home Varianten durchgehen – passt immer ( unter Home ist das Dropdown )
4 entspricht dann deiner Header Setzung.

https://basis.webers-testseite.de/home4/

no – i know now that i misunderstood your question – you do not want a two line menu – you want to have the menu-items labels in two lines.
Just a moment: …
Ismaels Code will work – if you got no shrinking header – but there are solutions for shrinking header too.

Just one moment – i think i got a more simple method now ! …

put in that Navigation Label of the menu-item:
( you only need those classes on the spans if you like to colorise them separatly or if they should have different font-styles )

<span class="firstline">Leistungen</span><span class="secondline">Portfolio</span>

give to the menu-item itself a class: twoliners

click to enlarge the image:

put this to your quick css

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr;
  padding: 0px 10px !important;
}

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text > span {
  justify-self: center;
  grid-column: 1 / 2;
  align-self: center;
}

#top #wrap_all #avia-menu .twoliners.menu-item-top-level.av-menu-button > a > .avia-menu-text  {
  gap: 3px 0;
}

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text > span {
  line-height: 0px;
  text-align: center;
}

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text > .secondline {
  color: #999;
  font-size: 1.1rem;
  font-style: italic;  
}

#top #wrap_all #avia-menu .twoliners.menu-item-top-level.av-menu-button-colored > a > .avia-menu-text > .secondline {
  color: #ddd;
}

Maybe you have to adjust some padding or gap value for your header height.
See here the test page: https://consulting.webers-testseite.de/

PS : you had to style the hamburger yourself f.e.

#av-burger-menu-ul * {
  border: none !important;
}

#av-burger-menu-ul > li {
  margin: 10px 0 !important;
}

#top #wrap_all #av-burger-menu-ul .twoliners.av-menu-button > a {
  padding-left: 10px ;
}

#av-burger-menu-ul .twoliners > a > .avia-menu-text {
  display:grid;
  height:100%;
  grid-template-columns:1fr;
  gap: 10px
}

#av-burger-menu-ul .twoliners > a > .avia-menu-text > span {
  justify-self:left;
  grid-column:1 / 2;
  align-self:center;
}

#av-burger-menu-ul .twoliners > a > .avia-menu-text > span.secondline{
  padding-left: 10px;
  color: #ddd;
  font-size: 1.1rem;
  font-style: italic;
}
/****  etc. ****/

yes – you can do that – or leave all as it is with buttons – and just remove the button styling on that:

body #people .avia-button {
  color: #000 !important;
  background-color: transparent;
  border-radius: none;
  padding: 0;
  font-size: 16px;
  border-bottom: none;
  text-align: left;
  background-color: transparent;
}

body #people .avia-button:before {
  content:"+ "
}

body #people .avia-button:active {
  outline: none;
  border: none;
}

hm – yes but this was meant for main-menu on left or right position.
but i think there will be now a better solution – just a moment …

put this in your child-theme functions.php:

add_shortcode('avia_search', 'get_search_form');

function avf_add_search( $items, $args ){
  if ($args->theme_location == 'avia'){
	  $search = '<li id="menu-item-search" class="menu-item menu-search menu-item-top-level">';
	  $search .= do_shortcode('[avia_search]');
	  $search .= '</li>';
    $items =  $items . $search;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'avf_add_search', 10, 2 );

and this to your child quick css:

.av-main-nav-wrap > ul:first-of-type {
  display: inline-flex !important;
  height: 100%;
}

#menu-item-search {
  line-height: 30px;
  position: relative;
}

#menu-item-search #searchform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  line-height: 40px;
}

#top #searchform > div:first-of-type {
  position: relative;
  max-width: 200px;
  opacity: 1 !important;
  display: block !important;
}

#menu-item-search #searchform #s {
  padding: 10px 40px 10px 5px;
  font-size: initial;
  background-color: rgba(255,255,255,0.85);   /*** if you like to have transparency ***/ 
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  top: 45px;
  padding: 10px 0;
  width: 100%;
}

/******* if you got  transparency option ******/
#header.header_color.av_header_transparency #avia-menu #menu-item-search #searchform #s {
  background-color: rgba(255,255,255,0.35);
  color: #FFF !important;
}
#header.header_color.av_header_transparency #avia-menu ::placeholder {
  color: #FFF !important;
}
/*** end of transparency header setting ***/