Sådan bruger du Shopifys nye font_picker-indstillinger

Shopify annoncerede for nylig et nyt partnerskab med Monotype, som har gjort hundredvis af smukke nye skrifttyper gratis tilgængelige for Shopify-handlere i deres onlinebutikker. At have et så stort udvalg af kvalitetsskrifttyper til rådighed for dine kunder vil give dem et stærkt udgangspunkt for at kommunikere deres brandidentitet.

Det nye Shopify-skrifttypebibliotek indeholder skrifttyper, der er licenseret fra Monotype, et udvalg af Google-skrifttyper og websikre skrifttyper. Dine kunder vil stadig være i stand til at vælge premium-skrifttyper fra Monotype-samlingen, inklusive Avenir, Linotype Didot og Charter samt fra den populære Google Fonts-samling – inklusive Open Sans og Montserrat.

En nøglekomponent i denne nye funktion er font_picker indstillingstype, som kan implementeres i temaer fra settings_schema.json fil og sektionsfiler. I øjeblikket er denne funktion indbygget understøttet af Slate starter-temaet, hvilket er fantastiske nyheder for udviklere, der arbejder på nye temaer!

Imidlertid vil mange kunder måske opdatere deres eksisterende brugerdefinerede temaer for at få adgang til det nye Shopify-skrifttypebibliotek. Når skrifttypevælgeren er konfigureret, kan dine kunder hurtigt og nemt vælge mellem en bred vifte af premium-skrifttyper og undgå enhver licensering eller vanskelig kodning.

I denne artikel vil jeg demonstrere, hvordan du kan bruge font_picker indstilling, indtast din klients temaer, og vis dig et par måder at konfigurere et stylesheet på ved hjælp af de nye Liquid-skrifttypefiltre. Jeg vil også vise dig, hvordan du kan teste og kvalitetssikre dine temaer for at sikre, at hver skrifttypevariant vises korrekt.

Du kan måske også lide: Forstå Shopify Theme Styles og Presets Med settings_data.json.

Opsætning med font_picker

Tidligere, da skrifttyper blev anvendt på temaer ved hjælp af select indstillingstype, skal hver skrifttype føjes til listen over muligheder i indstillingskonfigurationen, og temaet skal implementere tilpasset logik for at indlæse skrifttypen. Selvom alle Google-skrifttyper kunne inkluderes her, er processen med at tilføje hver skrifttype manuelt besværlig og gør denne fil vanskelig for udviklere at navigere.

Den nye font_picker indstilling erstatter indlejrede indstillinger ved at generere en dynamisk valggrænseflade og giver dig mulighed for at vælge fra Shopifys skrifttypebibliotek i stedet for manuelt at skulle angive tilgængelige indstillinger. Når denne indstilling er tilføjet til settings_schema.json fil, kan sælgere få adgang til Shopifys skrifttypebibliotek fra temaeditoren og vælge deres foretrukne skrifttype.

Som et eksempel, når den nye font_picker indstilling anvendes på overskrifterne og knapperne i et tema, arrayet i settings_schema.json kunne se sådan ud:

{
"name": "Typografi",
"indstillinger": [
{
"type": "header", 
"content": "Headings and buttons" 
},
{
"type": "font_picker",
"id": "header_font_new",
"label": "Font",
"default": "work_sans_n6"
},

Here we can see that settings are being created for an area in the theme editor for Typography, specifically ‘Headings and buttons’. The settings for type, id, label, and default, were all present in previous iterations of Shopify themes, but we can see here that the font_picker setting type differs from select in that it doesn’t require you to specify options.

Once font_picker is the declared type, we need to add an identifier. This setting value will be used later to set the CSS properties. The Setting ID that we add here is how these configured values are accessed from Liquid.

It’s highly recommended that developers use a new ID when implementing font_picker, so the settings don’t conflict with previous setting_data.json values. This will help to prevent issues when updating themes. In this example, I’m using the ID header_font_new.

The label field in this array determines how this element appears on the theme editor. For this, the simplest option here would be ‘font’.

The default setting acts as you would expect, and assigns a default font to load. In this case I used “work_sans_n6”, but any of the fonts in the library can be used. It’s important to note that the correct naming format must be used—developers can find a list of possible defaults from the Shopify font library.

Once the new font_picker setting is implemented fully, this is an example of what settings_schema.json could look like:

In this example, you can also see that there are settings for defining the font sizes for heading and regular text. This is a technique from the Debut theme, which uses a range setting type to allow merchants to select a font size along a sliding scale.

The min, max, and step settings allow us to define parameters for this scale, while the unit setting declares the unit of measurement, in this case pixel. Our help docs cover how the range value can be used in greater detail.

Stepping up your font styling

Next on the theme’s stylesheet, we’ll need to set the CSS properties for our fonts, as well as style the text elements to use our configured fonts. We can assign a variable to the font setting ID we created, and then apply font filters to these variables. This could appear like this:

In the above example, we can see our two new Liquid font filters at work. The font_face filter returns a CSS @font-face declaration, which loads the font picked by your client on the theme editor. The output of the font_face filter includes the family, weight, and style of the font, as well as a URL from where this font can be accessed.

The font_modify filter allows us to access different variants of the same font, and set specific styles and weights. This ensures that Shopify’s custom fonts will load correctly for each formatting option. It’s also important to note here that not all font families have all these variants.

Now that the object settings.header_font_new has been assigned the variable header_font, we can use Sass to explicitly define which elements these new style settings apply to. As an example, our Sass variables could look like this:

$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-weight-header: {{ header_font.weight }};
$font-style-header: {{ header_font.style }};

In this example we are assigning our font settings, as well as web-safe fallback fonts, to the Sass variable $font-stack-header and declaring Sass variables for both weight and style.

Now when a header’s font-family property is given a value of $font-stack-header, the header will be assigned a font on the theme editor, using the new font picker feature. Similarly the weight and style is set up with Sass variables. For a main heading, this could appear on your stylesheet like this:

.h1 {
font-family: $font-stack-header;
font-weight: $font-weight-header;
font-style: $font-style-header;
}

Once all filters are applied and variables are assigned, your clients will be able to easily select any of Shopify’s available fonts from the theme editor:

To get a complete view of how a stylesheet could be set up to work with the new font settings and filters, it’s useful to look at how existing themes have been set up. For example, below is the Typography section of Debut’s stylesheet, where you can see how filters and variables are implemented to connect with the Shopify font library.

By modeling your process off an existing theme that uses best practices, you can develop your own approach for safely implementing this new feature.

Du kan måske også lide: En begyndervejledning til Sass med Shopify — Del 1: Kom godt i gang med Sass.

Kvalitetssikringstest

Når du har konfigureret din klients tema til at bruge Shopifys skrifttypebibliotek, er det vigtigt at sikre, at CSS-filen indlæser varianterne fed, kursiv og fed-kursiv for hver skrifttype ved hjælp af font_modify filter. Disse ekstra varianter er et krav for sider, der bruger Rich Text-editoren, eller hvis der er en temaindstilling til at tilføje forskellige formateringstyper.

Hvis du ikke erklærer disse vægte, vil det tvinge browseren til at forfalske de fed, kursiv og fed kursiv versioner, hvilket forårsager uoverensstemmelser mellem browsere og dårlig skrifttypegengivelse. Du kan teste for problemer med disse varianter ved at oprette en almindelig side med tekst ved hjælp af følgende vægte:

• Fremhævet
• Kursiv og fed
• Kursiv
• Normal

En af de nemmeste måder at bekræfte, at de sande vægte bliver indlæst på, er at bruge Firefoxs skrifttypeværktøjer til at registrere, hvilken skrifttypevægt der vises. Når du bruger Firefox-udviklerværktøjerne til at inspicere et element på siden, viser Fonts-visningen alle de skrifttypeindstillinger, der bruges af dette valgte element.

Vi kan se i dette eksempel ovenfor, når du inspicerer kursiv og fed tekst, at font-style værdien er “kursiv”, mens font-weight er 700. Hvis dette var kodet forkert, kunne du se “normal” som font-styleeller “400” som font-weight.

Husk at tjekke dit tema i hver browser, da ikke alle browsere vil opføre sig ens ved indlæsning af skrifttyper.

Nyttige links til yderligere læsning:

Hvis du har lyst til at lære mere om det nye font_picker og skrifttypefiltre, læs nogle af disse ressourcer fra Shopify Help Center:

Typografi 2.0

Som du har set, kan det nye Shopify-skrifttypebibliotek udvide de tilgængelige værktøjer, som sælgere har til at udtrykke deres brandidentitet og skabe en mulighed for dig at opgradere dine kunders temaer. Tilføjelse af denne funktion til eksisterende brugerdefinerede temaer og indbygning af den til nye temaer vil tilføje ekstra værdi til det, du kan tilbyde kunderne. Forhåbentlig bliver det en smule lettere at tilføje denne funktion ved hjælp af denne artikel.

Har du haft mulighed for at arbejde med den nye skrifttypevælger-indstilling endnu? Fortæl os det i kommentarfeltet nedenfor.