Ändra typsnitt i temat Twenty Nineteen

Jag har själv bidragit till utvecklingen av det senaste standardtemat, men det är ett par saker som jag fortfarande har lite svårt för.

Jag har nämligen svårt att arbeta med och läsa typsnittet Baskerville Old Face. Det är ett av typsnitten som Twenty Nineteen använder till brödtexten, och det är för smalt för mig.

Om du bara vill ändra typsnitt på den delen av sidan som besökaren ser så räcker det att lägga till en kort kod i inställningen Extra CSS under Anpassa (customizern).

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

Koden skriver över det tidigare typsnittet och ser till att samma typsnitt nu används för både brödtext och rubriker.


Tvärtemot konstens alla regler

Men för att byta typsnitt i själva redigeraren där vi arbetar med våra texter, så behöver vi ändra filen style-editor.css. Det är den filen i Twenty Nineteen som kontrollerar utseendet på delar av den nya blockredigeraren.

Du vet säkert att man absolut inte bör göra ändringar direkt i ett tema, för då förlorar vi ändringarna när temat uppdateras. Men i det här fallet väljer jag faktiskt att göra ett undantag, eftersom att vi bara behöver ändra en rad kod. Det är oftast inte lönt att skapa och installera ett child theme (barntema) för en sådan liten ändring. Om du vill göra större ändringar så rekommenderar jag inte den här metoden.

För att redigera filen går vi istället till menyn Utseende och väljer Temaredigeraren.

Kontrollera att Twenty Nineteen är det valda temat. Markera sedan filen style-editor.css:

Bilden visar en lista på filer som är tillgängliga i temaredigeraren.

Scrolla ner till rad 611 där du hittar raden med texten /** === Base Typography === */

Radera rad 614 som börjar med texten font-family.

Kopiera och klistra in informationen om det typsnitt vi kommer att använda istället:

font-family: "NonBreakingSpaceOverride", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Hela stycket ska se ut som nedan:

/** === Base Typography === */
body {
  font-size: 22px;
  font-family: "NonBreakingSpaceOverride", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 1.8;
  color: #111;
}

Med de här två koderna använder vi samma typsnitt på rubriker och brödtext både i redigeraren och på utsidan.