--- title: "Code kaputt: ein kurzer Werkstattbericht" author: "Alex" date: 2020-04-19 lang: de source: https://voneff.de/code-kaputt-ein-kurzer-werkstattbericht/ --- # Code kaputt: ein kurzer Werkstattbericht Ich möchte von einigen kleinen Schwierigkeiten beim Website-Bau berichten, die mich in der vergangenen Woche definitiv zu viel Zeit gekostet haben, deren Lösung aber letztendlich viel zu einfach war. ## Webfonts: auf dem Desktop geladen, auf Mobile nicht Eine seit 2015 bestehende Website sollte mithilfe von Fonts umgestaltet werden, die von Google Fonts kommen. Die neu gestaltete Website sah bei mir auf dem Desktop wunderbar aus, aber auf Mobile erschienen nur die Fallback-Schriftarten. Das Stylesheet von Google hatte ich über die `functions.php` an `wp_print_styles` drangehängt. Wie konnte das sein? Ich probierte alle anderen Methoden aus: In der `header.php` zu verlinken. Sogar: per `@import` in mein Stylesheet zu importieren. Mit dem [*google-webfonts-helper*](https://google-webfonts-helper.herokuapp.com/fonts) herunterladen und lokal einbinden. Per [Plugin](https://wordpress.org/plugins/host-webfonts-local/) lokal einzubinden. Nix. Bis ich dann endlich mal darauf kam, dass die Website bei mir auf dem Desktop nur deshalb richtig aussah, weil ich exakt diese Fonts in meinem Betriebssystem installiert hatte und der Browser sie einfach von dort aus lud. Schlau, schlau. Das war zwar die simple Erklärung für die Diskrepanz zwischen meinem Desktop und Mobile, aber nicht des Rätsels Lösung. ## Deny from me Im Dashboard der oben genannten Seite hatte ich noch ein merkwürdiges Phänomen: Manche Plugin-Icons wie etwa das von [Duplicator](https://de.wordpress.org/plugins/duplicator/) wurde mir angezeigt, das WooCommerce-Icon jedoch nicht, sondern nur so ein lustiges kleines Kästchen mit einer Unicode-Hex-Nummer drin. 🤔 Ich kam jetzt mal auf die schlaue Idee, den Fehlercode zu googlen, den mir die Konsole ausspuckte: ``` downloadable font: download failed (font-family: "WooCommerce" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: https://meinedomain.de/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff ``` Und schon stieß ich im Forum des von mir ziemlich geschätzten [GeneratePress](https://generatepress.com/)-Themes auf die Lösung, denn ein gewisser Jakob Smith schien ähnliche Probleme zu haben. Seine [simple Erkenntnis](https://generatepress.com/forums/topic/problem-with-icons-font-awesome/): „ The culprit was an .htaccess in wp-content, which only allowed certain filetypes to be downloaded.“ Moment, eine `.htaccess` im `wp-content`-Folder? Tatsache. Was stand drin? ``` Order deny,allow Deny from all Allow from all ``` Okay, das erklärte dann wohl, warum die Google Fonts nicht lokal eingebunden werden konnten. Kaum hatte ich hier die entsprechenden Endungen ergänzt, war das Problem gelöst. Und warum wurde das Duplicator-Icon angezeigt, das WooCommerce-Icon nicht? Duplicator bringt sein Icon als Inline-SVG mit, WooCommerce lädt eine eigene Icon-Font. Aber wer hatte diese `.htaccess` denn bloß da hingesetzt? Vielleicht derjenige, der die Website vor fünf Jahren aufgesetzt hatte? **Genau, ich selbst nämlich**. 😂 ## Die Tabelle überlistet Zum Abschluss noch eine schöne Dreiecks-Liebesbeziehung. Die Liebhaber*innen: WooCommerce, die Ergänzung [German Market](https://marketpress.de/shop/plugins/woocommerce/woocommerce-german-market/) und das [Weta-Theme](https://www.elmastudio.de/wordpress-themes/weta/) von Elmastudio. Schauplatz: der Warenkorb und folgende Seiten auf Mobile. Was war los? Der Abschnitt mit der Überschrift *Warenkorb Summe* wurde nicht komplett angezeigt, sondern wurde nach rechts aus dem Viewport rausgeschoben, ohne jedoch einen Vertical Scroll zu produzieren. Das *Inspect*-Tool zeigte mir, dass WooCommerce hier ein paar hübsche Tabellen zum Einsatz kommen lässt (geht das heutzutage nicht anders?) und German Market sich dann unter der *Zwischensumme* einklinkt, um die Versandkosten korrekt anzuzeigen. Aber ich hätte mal gleich etwas genauer hinschauen sollen, denn zunächst habe ich hier munter versucht, den Content irgendwie kleinzukriegen und in die Zellen zu quetschen: Schriftgrößen überall runter, Silbentrennung rein, überall das Padding reduziert. Es hat ewig gebraucht, dann hat es halbwegs gepasst. Viel zu spät bin ich allerdings drauf gekommen, dass WooCommerce die Versandmethoden hier als ungeordnete Liste mit der CSS-Klasse `woocommerce-shipping-methods` aufführt. Und was bringt das Weta-Theme „hinterhältigerweise“ mit? Die folgende `ul`-Definition: ``` ul { margin: 0 0 30px 0; padding-left: 40px; list-style-position: inside; } ``` Und genau dieses üppige Padding war es, was mir da die ganze Zeit das Layout so verzog. Die simple Lösung: ``` ul.woocommerce-shipping-methods { padding-left: 0; } ``` ## Shruggie-Schluss Für viele wären die oben beschriebenen Hürden vermutlich Pipifax und innerhalb von drei Minuten geklärt gewesen – mich haben sie ein paar Stündchen gekostet. Was solls, ich nehme es als Teil des Lernprozesses. 🤷 Was hat euch in letzter Zeit unnötigerweise aufgehalten? Was war euer letzter Aha–Moment, ob peinlich berührt oder nicht? Teilt es in den Kommentaren! --- Die Illustration oben stammt von [Ouch.pics / Icons8.com](https://icons8.com/ouch/illustration/bermuda-fatal-error).