Hur man lĂ€gger till Googles webbteckensnitt i WordPress-teman pĂ„ “rĂ€tt” sĂ€tt

Quick use fonts from Google Fonts

Google-teckensnitt Àr fantastiska gratis resurser för webbdesigners. I WPBv4 har vi börjat anvÀnda en populÀr Google Font-kombination: Oswald och Lora. NÄgra av vÄra anvÀndare har frÄgat oss hur man lÀgger till Google Web-teckensnitt i WordPress-teman. Om du kommer ihÄg visade vi hur man lÀgger till Google-teckensnitt i WordPress Post Editor. I den hÀr artikeln visar vi dig hur du lÀgger till Google Web Fonts i dina WordPress-teman RÀtt vÀg, optimerad för prestanda.

Hitta de Google-typsnitt som du gillar

Det första du behöver göra Ă€r att hitta ett Google-typsnitt som du gillar. GĂ„ vidare till Google-teckensnitt och blĂ€ddra igenom biblioteket. NĂ€r du hittar teckensnittet du gillar klickar du pĂ„ “SnabbanvĂ€ndning” knapp.

NÀr du klickar pÄ snabbanvÀndningsknappen kommer du till en ny sida. BlÀddra ner tills du ser rutan för anvÀndningsinstruktioner med kod som du kan lÀgga till pÄ din webbplats.

Google-inbÀddningskod för teckensnitt

Du ser att det finns tre olika flikar för att lÀgga till teckensnittet pÄ din webbplats. Den första Àr den vanliga och rekommenderade metoden för att lÀgga till Google-teckensnitt pÄ din webbplats. Den andra fliken anvÀnder @import CSS-metoden, och den sista fliken anvÀnder JavaScript-metoden.

Vi visar dig hur du anvÀnder var och en av dessa metoder och vad som finns för och nackdelar.

Videohandledning

Prenumerera pÄ WPBeginner

Om du inte gillar videon eller behöver fler instruktioner, fortsÀtt lÀsa.

LĂ€gga till Google Web-teckensnitt i WordPress-teman

Vi har mest sett mÀnniskor som anvÀnder de tvÄ första metoderna.

Det enklaste sÀttet skulle vara att öppna dina teman style.css fil och klistra in teckensnittskoden som du fick pÄ fliken @import, sÄ hÀr:


@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);

Du kan ocksÄ kombinera flera teckensnittsförfrÄgningar i en. SÄ hÀr skulle du göra det:

@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

Den hÀr metoden Àr super enkel men det Àr inte det bÀsta sÀttet att lÀgga till Google-teckensnitt pÄ din WordPress-webbplats. Med anvÀndning av @import-metoden blockeras parallella nedladdningar, vilket innebÀr att webblÀsaren vÀntar pÄ att den importerade filen har laddats ned innan den börjar ladda ner resten av innehÄllet.

Om du MÅSTE anvĂ€nda @import, kombinera Ă„tminstone flera förfrĂ„gningar i en.

Prestandaoptimerad metod för att lÀgga till Googles webbteckensnitt

Det bÀsta sÀttet att lÀgga till Google-teckensnitt Àr att anvÀnda standardmetoden som anvÀnder lÀnkmetoden istÀllet för importmetoden. Ta bara din URL för teckensnitt som du fick frÄn steg 1. Om du lÀgger till flera teckensnitt kan du kombinera de tvÄ teckensnitten med en | karaktÀr. Placera sedan koden i ditt temas huvuddel.

Du kommer troligtvis att behöva redigera filen och klistra in följande kod ovanför ditt huvudformat. Exemplet skulle se ut sÄ hÀr:


<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

I grund och botten Àr mÄlet att stÀlla in teckensnittsbegÀran sÄ tidigt som möjligt. Enligt Googles webbteckensnittsblogg, om det finns ett skriptmÀrke före @ font-face-deklarationen, kommer Internet Explorer inte att göra nÄgonting pÄ sidan förrÀn teckensnittsfilen har laddats ner.

NÀr du vÀl har gjort det kan du helt enkelt börja anvÀnda det i ditt temas CSS-fil sÄ hÀr:

h1 {
    font-family: 'Oswald', Helvetica, Arial, serif;
}

Nu finns det mÄnga temaramar och barnteman dÀr ute. Det rekommenderas INTE att Àndra dina överordnade temas filer speciellt om du anvÀnder ett temaramverk eftersom dina Àndringar ÄsidosÀtts nÀsta gÄng du uppdaterar ramverket. Du mÄste anvÀnda de krokar och filter som presenteras av det överordnade temat eller ramverket för att lÀgga till Google-teckensnitt ordentligt i dina barns teman.

Korrekt inhÀmta Google-teckensnitt i WordPress

Ett annat sÀtt att lÀgga till Google-teckensnitt till din WordPress-webbplats Àr genom att hÀva teckensnittet i ditt temas funktioner.php-fil eller ett webbplatsspecifikt plugin.


function wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );


Glöm inte att ersÀtta teckensnittslÀnken med din egen.

Laddar Google-teckensnitt med JavaScript

För den hÀr metoden mÄste du kopiera koden pÄ JavaScript-fliken i avsnittet om instruktioner för Googles teckensnitt. Du kan klistra in den hÀr koden i ditt tema eller underordnade temas header.php-fil direkt efter -taggen.

VÄrt sista tips om hur du anvÀnder Google Web-teckensnitt pÄ din webbplats Àr att inte ladda teckensnitt som du inte kommer att anvÀnda. Om du till exempel bara vill ha fet och normal vikt, lÀgg inte till alla andra stilar.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till Google Web Fonts i dina WordPress-teman pÄ rÀtt sÀtt, sÄ att din webbplats kan laddas snabbt. Du kanske ocksÄ vill kolla in vÄr guide om hur du lÀgger till Typekit-teckensnitt i WordPress.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du hittar oss ocksÄ pÄ Twitter och Facebook.