Loistava tapa lisätä brändäystä ja yksilöllisyyttä WordPress -sivustollesi on vaihtaa teemasi kirjasimia.

Typografia ja muut nauhaelementit luovat hyvän ensivaikutelman, luovat tunnelman sivustosi vierailijoille ja vahvistavat brändisi identiteettiä. Tutkimuksissa^(Studies) on myös havaittu, että kirjasimet vaikuttavat lukijoiden kykyyn oppia, muistaa tietoa ja muistaa tekstejä.

Jos olet juuri asentanut WordPress-teeman^{(installed a WordPress theme)} tai sinulla on CSS- ja koodauskokemusta, näytämme sinulle useita vaihtoehtoja, joiden avulla voit vaihtaa kirjasimia WordPressissä^(WordPress) .

Kuinka muuttaa fontteja WordPressissä^{(How to Change Fonts in WordPress)}

Voit vaihtaa kirjasimia WordPressissä kolmella päävaihtoehdolla:

• Käytä verkkokirjasimia, kuten Google Fonts , Fonts.com tai Adobe Edge Web Fonts , joita ylläpidetään kolmannen osapuolen sivustolla
• Koodaa^(Code) verkkokirjasimia teemaasi ja aseta ne jonoon
• Isännöi^(Host) fontteja sivustollesi ja lisää ne teemaasi

1. Fonttien vaihtaminen WordPressissä verkkofonttien avulla^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Verkkofonttien käyttäminen on helpompi ja nopeampi tapa vaihtaa kirjasimia WordPressissä^(WordPress) kuin fonttitiedostojen lataaminen ja lähettäminen.

Tämän vaihtoehdon avulla voit käyttää useita kirjasimia^{(access a variety of fonts)} päivittämättä niitä joka kerta, kun tapahtuu muutoksia, eikä se vie palvelintilaa isännöinnissäsi. Fontit toimitetaan suoraan palveluntarjoajan palvelimilta laajennuksen avulla tai lisäämällä koodia sivustollesi.

Varmista^(Make) , että sivustollesi valitsemasi verkkokirjasimet vastaavat brändi-identiteettiäsi, ovat helposti luettavissa leipätekstiä, ovat verkkosivuston vierailijoille tuttuja ja välittävät haluamaasi tunnelmaa ja mielikuvaa.

Voit lisätä verkkofontteja WordPress-laajennuksella^{(using a WordPress plugin)} tai manuaalisesti lisäämällä sivustollesi muutaman rivin koodia. Tutkitaan molempia vaihtoehtoja.

Web-fonttien lisääminen WordPress-laajennuksella^{(How to Add Web Fonts Using a WordPress Plugin)}

Riippuen valitsemastasi verkkokirjasimesta, voit käyttää WordPress -laajennusta kirjasinten kirjastoon ja valitaksesi haluamasi fontin sivustollesi. Tätä opasta varten valitsimme Google Fontsin^{(Google Fonts)} ja käytimme Google Fonts Typography -laajennusta.

1. Aloita kirjautumalla sisään WordPressin^(WordPress) hallintapaneeliin ja valitsemalla Plugins > Add New .

1. Kirjoita hakukenttään Google Fonts Typography ja valitse ^{(Google Fonts Typography)}Asenna nyt^{(Install Now)} .

1. Valitse Aktivoi^(Activate) .

1. Siirry seuraavaksi mukauttajaan^(Customizer) valitsemalla Appearance > Customize .

1. Valitse Google Fonts -osio.

1. Napsauta seuraavaksi linkkiä avataksesi fonttien asetukset ja määritä ne seuraavasti:

• Aseta Perusasetukset -kohdassa^{(Basic Settings)} leipätekstin, otsikoiden ja painikkeiden oletusfontti.

• Määritä Lisäasetukset -kohdassa^{(Advanced Settings)} sivustosi otsikko ja kuvaus, valikko, otsikot ja sisältö, sivupalkki ja alatunniste.

• Poista^(Uncheck) ei-toivottujen kirjasinten painot Fontin lataus^{(Font Loading)} -osiosta, jotta sivustosi hidastaminen^{(avoid slowing down your site)} ei hidastu .

Jos sivustollasi on fontteja, jotka eivät näy tai toimi kunnolla, käytä Vianmääritys^{(Debugging )} -osiota vianetsintään.

1. Voit testata näitä asetuksia mukauttajassa^(Customizer) varmistaaksesi, että ne toimivat haluamallasi tavalla, ja valitse sitten Julkaise^(Publish) .

Huomautus^(Note) : Jos unohdat valita Julkaise-vaihtoehdon mukauttajassa^(Customizer) , menetät kaikki tekemäsi muutokset.

Web-fonttien lisääminen koodin avulla^{(How to Add Web Fonts Using Code)}

Voit asentaa ja käyttää verkkofontteja, jos sinulla on pääsy teemasi koodiin. Tämä on manuaalinen vaihtoehto ylimääräisen laajennuksen lisäämiselle, mutta se ei ole monimutkaista, jos noudatat ohjeita huolellisesti.

On kuitenkin suoritettava erilaisia ​​vaiheita, jos käytät teemaa WordPressin^(WordPress) teemahakemistosta tai mukautettua teemaa.

Jos ostit teeman WordPressin^(WordPress) teemahakemistosta, luo alatason teema^{(create a child theme)} ja anna sille sitten style.css- ja functions.php-tiedostot. On helpompaa, jos sinulla on mukautettu teema, koska voit muokata tyylisivua ja funktiotiedostoa teemastasi.

1. Aloita valitsemalla kirjasin Google Fonts -kirjastosta ja lisäämällä se kirjastoosi valitsemalla + (plus)

1. Valitse seuraavaksi alareunasta välilehti, josta löydät sivustollesi lisättävän koodin. Siirry Upota^(Embed) - välilehden Upota kirjasin^{(Embed font)} -osioon . Löydät Google Fontsin^{(Google Fonts)} luoman koodin , joka näyttää suunnilleen tältä:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Huomautus^(Note) : Valitsimme Work Sansin^(Sans) tähän oppaaseen, joten fontin nimi voi olla erilainen valitsemasi kirjasimen mukaan.

1. Kopioi tämä koodin osa: https://fonts.googleapis.com/css2?family=Work+Sans

Tämän avulla voit asettaa tyylin jonoon Google Fonts -palvelimista estääksesi ristiriidat kolmannen osapuolen laajennuksien kanssa. Se mahdollistaa myös helpompia lastenteeman muokkauksia.

1. Jos haluat lisätä fontin jonoon, avaa funktiotiedosto ja lisää seuraava koodi. ( Korvaa^(Replace) linkki Google Fontsista saamallasi^{(Google Fonts)} linkillä ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

1. Voit lisätä uuden rivin funktioosi tai samalle riville, jos haluat lisätä fontteja jatkossa seuraavasti:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

Tässä tapauksessa olemme laittaneet jonoon sekä Cambria- että Work^(Cambria) Sans -kirjasimet^{(Work Sans)} .

Seuraava vaihe on lisätä fontit teemasi tyylitaulukkoon, jotta kirjasin toimii sivustossasi.

1. Voit tehdä tämän avaamalla teemasi style.css-tiedoston ja lisäämällä koodin yksittäisten elementtien tyylistämiseksi verkkokirjasimillasi seuraavasti:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

Tässä tapauksessa pääkirjasin on Work Sans , kun taas otsikkoelementit, kuten h1, h2 ja h3, käyttävät Cambriaa^(Cambria) .

Kun olet valmis, tallenna tyylitaulukko ja tarkista, toimivatko fontit oikein. Jos ei, tarkista, ettei fontteja ole ohitettu tyylitaulukossa, tai tyhjennä selaimen välimuisti ja yritä uudelleen.

1. Varaa varmuuskopiofontti varmistaaksesi, että kirjasimet voidaan renderöidä tai käyttää helposti erityisesti käyttäjille, joilla on vanhoja laitteita, huonoja yhteyksiä tai jos kirjasinten toimittajalla on teknisiä ongelmia. Voit tehdä tämän siirtymällä tyylitaulukkoon ja muokkaamalla CSS :ää seuraavasti:

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Jos kaikki on hyvin, sivustosi vierailijat näkevät oletusverkkokirjasimesi, meidän tapauksessamme Work Sans ja Cambria . Jos ongelmia ilmenee, he näkevät varmuuskopiofontit, esimerkiksi Arial tai Times New Roman meidän tapauksessamme.

2. Fonttien vaihtaminen WordPressissä isännöimällä fontteja^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Kirjasimien isännöiminen omilla palvelimillasi auttaa sinua optimoimaan verkkokirjasimiesi suorituskyvyn, mutta se on myös turvallisempi tapa^{(a more secure way)} tehdä se sen sijaan, että hakisi resursseja kolmansien osapuolien sivustoilta.

Google Fonts ja muut verkkokirjasimet antavat sinun ladata kirjasimia käytettäviksi paikallisesti isännöityinä kirjasimina, mutta voit silti ladata muita kirjasimia tietokoneellesi edellyttäen, että lisenssit sallivat sen.

1. Aloita lataamalla, purkamalla, lataamalla fonttitiedosto sivustollesi ja linkittämällä se sitten tyylitaulukkoon. Tässä tapauksessa sinun ei tarvitse asettaa fontteja jonoon functions.php-tiedostoon, kuten teit verkkokirjasimien kanssa. Varmista, että lataamasi tiedostot ovat .woff- muodossa, ennen kuin käytät niitä verkkosivustossasi.

1. Siirry seuraavaksi osoitteeseen wp-content/themes/themename ladataksesi kirjasintiedoston teemaasi. 
2. Avaa tyylitaulukko ja lisää seuraava koodi (tässä tapauksessa käytämme Work Sans -kirjasinta, mutta voit korvata sen omilla kirjasimillasi):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normaali; ^{( font-weight: normal;)}
font-tyyli: normaali; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: lihavoitu; ^{( font-weight: bold;)}
font-tyyli: normaali; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normaali; ^{( font-weight: normal;)}
font-tyyli: normaali; ^{( font-style: normal;)}
}

Huomautus^(Note) : @fontface-komennolla voit käyttää lihavointia, kursivoitua ja muita fontin muunnelmia, minkä jälkeen voit määrittää kunkin fontin painon tai tyylin.

1. Lisää seuraavaksi elementeillesi tyyli seuraavasti:

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Mukauta WordPress-typografiasi^{(Customize Your WordPress Typography)}

Kirjasinten vaihtaminen WordPressissä^(WordPress) on loistava idea parantaa brändäystä ja käyttökokemusta. Se ei ole yksinkertainen tehtävä, mutta voit hallita teemaasi paremmin.

Pystyitkö^(Were) mukauttamaan sivustosi kirjasimia tämän oppaan vihjeiden ohjeiden mukaisesti? Kerro^(Tell) meille kommenteissa.

How to Change Fonts in WordPress

Α great way to аdd some branding and individυalism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• WordPress-sivuston siirtäminen isännästä toiseen

• Kuinka asentaa ja määrittää WordPress Microsoft Azuressa

• Kuinka ajaa äärimmäisen nopeaa WordPressiä Microsoft Azuressa

• Tietosuojan määrittäminen WordPressissä ja miksi se on tärkeää

• Kuinka asentaa WordPress Google Cloud Platformiin

• Kirja-arvostelu: Luo oma verkkosivusto: Sarjakuvaopas HTML-, CSS- ja Wordpressiin

• 10 välttämätöntä WordPress-laajennusta pienyrityssivustolle

• Wix Vs WordPress: Mikä on paras verkkosivustosi luomiseen?

• Squarespace vs WordPress: kumpi on parempi sivustoalusta?

• Alatunnisteen muokkaaminen WordPressissä

• Lapsiteeman luominen WordPressissä

• 7 WordPress-vinkkiä mobiiliystävälliseen verkkosivustoon

• Must Have WordPress Yoast SEO -asetukset 2022

• Suojaa ja suojaa WordPress-verkkosivusto hakkereilta

• Kuinka nopeuttaa mitä tahansa WordPress-sivustoa käyttämällä .HTACCESSia

• Kuinka käyttää WP Super Cachea WordPress-blogissa

• WordPress Jetpack: mikä se on ja kannattaako se asentaa?

• Kuinka löytää WordPress-järjestelmänvalvojan kirjautuminen

• Kuinka päivittää PHP WordPressissä

• 9 pakollista lisäosaa uusia WordPress-asennuksia varten