Google-fonttien yhdistäminen. Kuinka lisätä Google Web Fonts oikein WordPress-teemaan. Google Font API:n käytön edut

25. toukokuuta 2015 klo 18.06

Google WebFonts ja FontFaceObserver. Käytämme verkkosivuillamme kolmannen osapuolen kirjasimia

CSS
JavaScript

Verkkofontit. Tarina

WebFonts on tekniikka kolmannen osapuolen kirjasimien käyttämiseen verkkosivullasi. Yksi esimerkki:

Jos aloitamme alusta, fonttitunniste otettiin käyttöön vuonna 1995, ja jo vuonna 1996 kirjoitettiin ohjelmistomäärittely CSS:llä. CSS 2.0 -versiosta lähtien kirjasinten lataus ja synteesi otettiin käyttöön selaimissa, mutta siitä huolimatta silloin suositussa, mutta nyt vanhassa ja merkityksettömässä IE:ssä ei ollut tukea fonttien lataamiseen, mikä esti kirjasinten käytön nopeaa kehitystä verkkosivuillaan.

Nykyaikaisessa Internetissä verkkofontit ovat pitkään vakiintunut asia. Eri sivustoilla voimme käyttää erilaisia fontteja, jotka puolestaan ei sisälly tietyn käyttöjärjestelmän toimitukseen, mutta niillä on ei-toivottu sivuvaikutus, josta puhumme tänään.

Tiedostomuodot

Fontien yhdistämiseen käytetään ohjelmistolisäystä CSS:ään, ns. @-sääntöä. Joten yksinkertaisimmassa muodossaan @font-face on ilmoitus. Se näyttää tältä:

/* Ilmoita fontti */ @font-face ( font-family: "Font name"; src: url("polku/se"); ) /* Käytä fonttia */ p ( font-family: "Font nimi" ,Arial)
TTF tai OTF - meille tuttu fonttitiedosto, joka on ladattu palvelimelta sivustoa tarkasteltaessa;

WOFF on suojaamaton OTF- tai TTF-lähdearkisto, ehkä tärkein suosituimpien selaimien tukema muoto, ja WOFF-tiedostot ovat yleensä 2–2,5 kertaa alkuperäisiä kevyempiä;

EOT - TT OpenTypen toteuttama arkisto, jossa on suojausmekanismeja, tarvitaan tukemaan vanhempia Internet Explorer -selaimia (IE8:sta alkaen TrueType-käyrien lisäksi myös PostScript on tuettu);

SVG - tukee Safari-selainta.

Tänä päivänä verkkosivuilla käyttöönotettaviksi valmisteltujen kirjasimien (@font-face) tulee olla useassa muodossa kerralla. Ymmärsit, että on joitain eroja, aivan kuten on olemassa useampi kuin yksi käyttöjärjestelmätyyppi. Kirjasinmuotoja on monia, mutta tietty toimii vain tietyssä selaimessa. Mitä tulee juuri näihin formaatteihin, miksi niin monet niistä on määritettävä yhteyden muodostamisen yhteydessä, niitä tarvitaan sivuston selaimenväliseen tukeen.

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name" .woff") muoto("woff"), url("Font_file_name.ttf") muoto("truetype"), url("Font_file_name.svg#DSNoteRegular") muoto("svg"); fontin paino: normaali; fontti -tyyli: normaali)
Jos haluat käyttää salattua koodia tiedoston sijaan, niin tässä tapauksessa avuksemme tulee base64, joka toimii samalla periaatteella kuvien kanssa, mutta vanhalle IE:lle base64:ää ei käsitellä.

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); ) @font-face ( font-family: "Font_name_any"; src: url(data:font/woff;charset= utf-8;base64,DATA) muoto("woff"), url(data:font/truetype;charset=utf-8;base64,DATA) muoto("truetype"), url("Font_file_name.svg#Font_file_name") format("svg"); font-weight: normaali;

Upotettu OpenType?

Kuten olet ehkä huomannut, IE:n laajennusfonteilla on rivi, jossa on seuraava parametri:

Src: url("Font_file_name.eot?#iefix") muoto("embedded-opentype")
Klassisessa versiossa meidän olisi pitänyt ilmoittaa sinulle tämä:

Src: url("Font_file_name.eot") format("embedded-opentype")
Mutta kun lisäät "?" kirjasinmuodon jälkeen pakotamme selaimen olemaan lukematta seuraavaa ohjetta - format("embedded-opentype"). Internet Explorer tukee kirjasinten upottamista niin sanotun patentoidun Embedded OpenType -standardin kautta alkaen versiosta IE 4.0. Se käyttää digitaalisten oikeuksien hallintatekniikkaa estämään lisensoitujen fonttien kopioimisen.

Entä jos selaimen fonttia ei tueta?

Kauan sitten keksittiin kiertotapoja, niin sanottuja "sauvat" tietyn kirjasimen näyttämiseen. On tapauksia, joissa fontti on suunniteltu vain SVG-muodossa tai vain TTF-muodossa.

1. Muinaisina aikoina kehittäjät sisällyttivät kuvan, joka puolestaan oli visuaaliseen editoriin kirjoitettua tekstiä. Nyt tätä pidetään kuitenkin huonona muodona, koska tuki on melko vaikeaa (kuvan tekstin muuttamiseksi täytyy avata editori uudelleen), joten käyttäjä ei voi kopioida tekstiä kuvasta.

2. Myös salamaratkaisujen käyttö oli yleistä.

3. Toinen ratkaisu on käyttää Javascriptiä tekstin korvaamiseen VML:llä (Internet Explorer) tai SVG:llä (kaikki muut selaimet).

Mitä muita ongelmia voi syntyä?

Selain yrittää synkronoida fontin latauksen, se yrittää piilottaa tekstin eli tehdä sen näkymättömäksi, kunnes fontti on ladattu. Tätä efektiä kutsutaan FOITiksi, "valkoiseksi salamaksi".

Flash-efekti

FOIT-tehoste selaimissa, kuten Safari, Chrome, Opera, Firefox, pyrkii piilottamaan tekstiä enintään 30 sekunniksi ennen kuin se kieltäytyy vastaanottamasta fonttia, minkä jälkeen oletusfontti asetetaan.

Esimerkki fontin lataamisesta:

Silti 2,7 sekuntia on pitkä aika!

Mitä voidaan tehdä?

Alkuperäinen lähestymistapa oli mahdollistaa kirjasintiedostojen kääntäminen data-URI:iksi, jotta kyseiset kirjasimet voitaisiin sisällyttää suoraan CSS-tiedoston kirjasinperhemäärityksiin. Lataamalla tämän CSS-tiedoston asynkronisesti voit varmistaa, että selain renderöi välittömästi sivulla olevan tekstin mukautetuilla fonteilla ja uudet kirjasimet otetaan käyttöön heti, kun CSS on ladattu.

Jokaisessa kokeessa on kuitenkin sivuvaikutus.

Alun perin Bram Stein käytti mukautettua kirjasinta, mutta kirjasimen lataamisen jälkeen tapahtui "välkkymistä" esimerkissä 0,7 sekunnin kohdalla:

Lyhyesti sanottuna välkkymistä tapahtuu, kun selain yrittää renderoida fontin fonttiperheestä ja soveltaa sitä html:ään. @font-face-määrityksessä määritetty kirjasin, jota ei ole vielä ladattu.

Bram Stein osoitti, kuinka kirjasimia yhdistetään oikein, hän kehitti skriptin, Googlen vaihtoehdon fonttien asynkroniseen lataamiseen, tämä skripti on FontFaceObserver.

Kokeillaan

Analyysi

Normaali yhteys Googlelta

Ollakseni rehellinen, useamman kuin yhden kirjasimen käyttäminen sivustossa voi itse asiassa hidastaa sivuston sivun latausnopeutta ja pidentää siten kokonaislatausaikaa. Google Fonts API:n avulla voit nopeasti lisätä kirjasimen verkkosivustolle kirjasingeneraattorin avulla ja näin suunnitella verkkosivustosi nopeasti. Sinun on kuitenkin oltava tietoinen FOIT-vaikutuksesta. Kokonaislatausaika - 322 ms.

Web Font Loader Googlelta

Web Font Loader on JavaScript-kirjasto edistyneeseen API-työhön, kirjasto, joka antaa meille enemmän hallintaa fonttien lataamiseen kuin tavallinen Google Fonts API. Komentosarjan avulla voimme käyttää monia fontteja lataamalla ne peräkkäin tai asynkronisesti. Toisin kuin tavallinen yhteys, heikot yhteydet näyttävät tekstin vakiokirjasimella, kunnes fontti ladataan.
Kokonaislatausaika: 1132 ms

FontFaceObserver

FontFaceObserver on JavaScript-kirjasto (5 kt), niin sanottu latausohjelma, joka on yhteensopiva minkä tahansa verkkokirjasinpalvelun kanssa. Skriptin avulla voimme ilmoittaa meille, onko fontti latautunut vai ei, voimme seurata tapahtumaa lataamisen jälkeen ja ennen fontin lataamista. Kokonaislatausaika: 159 ms

Skriptin käyttö.

Tietenkin on olemassa erilaisia laajennuksia Google Web Fonts -sovelluksen käyttämiseen WordPress-sivustollasi, mutta jos olet kehittämässä omaa teemaasi, sinun on ehkä liitettävä valitsemasi typografia siihen tiiviisti ohittaen laajennukset. Alla näytämme, kuinka voit käyttää Google Web Fonts -kirjasimia teemassasi.

Ensin mennään sivustolle Googlen verkkofontit ja valitse fontti, jota meidän on käytettävä teemassa. Vasemmalla puolella olevia erikoistyökaluja käyttämällä voit rajata hakua, koska fontteja on todella paljon. Tiesin haluavani lihavoidun serif-fontin blogin otsikoille ja otsikoille, joten valitsin avattavasta Luokat-valikosta serifin ja siirsin sitten Paksuus-liukusäätimen oikealle.

Lopulta minulle tarjotut 617 vaihtoehtoa rajattiin viiteen. Sinulla on useita vaihtoehtoja kirjasimien esikatseluun - voit nähdä, miltä sana, lause, tekstikappale tai juliste näyttää valitulla fontilla. Voit valita esiasetetun tekstin, määrittää oman tekstisi ja valita haluamasi fonttikoon.

Kun olet löytänyt fontin, jota haluat käyttää sivustollasi, napsauta Lisää kokoelmaan -painiketta.

Voit lisätä kokoelmaasi kymmeniä fontteja. Tätä ei kuitenkaan aina vaadita. Se, että voit tehdä sen, ei tarkoita, että sinun pitäisi. Yritä rajoittaa itsesi enintään kolmeen fonttiin. Tai vielä parempaa, kaksi. Suorituskykysyistä haluan edelleen käyttää vanhaa web-turvallista kirjasinta sivuston rungossa ja tallentaa verkkokirjasimia otsikoille ja muille elementeille, jotka vaativat erityistä ilmaisua tai huomiota. Huolehdi kirjasimiesi luettavuudesta – älä käytä näyttävää kirjasinta, jos vierailijasi eivät ymmärrä, mitä on kirjoitettu.

Kun lisäät fontit kokoelmaan, näet ne sinisessä osiossa sivuston alaosassa. Kun sinulla on fontit, joita haluat käyttää kokoelmassasi, napsauta Käytä-painiketta.

Tämän jälkeen sinut ohjataan näytölle, jossa on nelivaiheiset ohjeet. Se opettaa sinulle fonttien käytön. Jos haluat ladata valitut kirjasimet käytettäväksi grafiikkaeditorissa, arvioida niitä tai tehdä teemallesi houkutteleva screenshot.png, sinun tarvitsee vain napsauttaa sivun yläreunassa olevaa Lataa fontit -painiketta. Jos haluat vain käyttää kirjasinta teemassasi, sinun ei tarvitse ladata sitä tietokoneellesi.

Ensimmäisessä vaiheessa voit valita yhdistetyn fontin tyylit ja paksuuden. Toisessa vaiheessa voit valita merkistön, jonka haluat yhdistää. Voit myös arvioida, kuinka kirjasinkokoelmasi vaikuttaa sivun latausnopeuteen.

Nyt siirrymme kolmanteen vaiheeseen, joka ei ole enää niin yksinkertainen kuin edelliset. Kolmannessa vaiheessa saamme koodin, joka on lisättävä sivustoillemme - kolme eri vaihtoehtoa. Valitsemme Standard-vaihtoehdon – poikkeamme kuitenkin hieman Googlen ohjeista tukeaksemme vakiintuneita menetelmiä tyylien lisäämiseksi WordPress-teemoihin. Vakioversion koodissa kopioimme vain URL-osoitteen, joka on määritetty linkkitunnisteen href-attribuutiksi.

Avaa sitten teeman functions.php-tiedosto. Luomme funktion lataamaan CSS:n, jota käytämme teemassamme:

Funktio ggl_load_styles() ( )

Näetkö funktiossani ggl-etuliitettä? Tämä on yksi WordPressin onnistuneista käytännöistä. Liitä aina funktioiden nimet etupuolelle WordPressissä vähentääksesi ristiriitojen riskiä teemasi, alateeman tai laajennusten muiden funktioiden kanssa.

Nyt tähän toimintoon meidän on rekisteröitävä Googlelta saamamme tyylisivu:

Funktio ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

Käytämme wp_register_style-funktiota. Ensimmäinen argumentti on kuvaaja, ts. lyhenne, jolla voimme viitata tähän tyylitaulukkoon myöhemmin koodissamme. Toinen argumentti on polku tiedostoon. Käytämme URL-osoitetta, jonka saimme Googlen ohjeiden kolmannessa vaiheessa.

Seuraavaksi sisällytämme teemamme päätyylisivumme. Toivottavasti et ole sijoittanut linkkitunnistetta header.php-tiedostosi head-osioon? Jos näin on, palaa tiedostoon ja poista tämä koodi. Lisää sitten tyylitaulukko functions.php-tiedostoosi:

Funktio ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl" ", get_stylesheet_uri(), array("googleFont")); ) )

Käytämme wp_enqueue_style-funktiota. Sillä on samat argumentit kuin wp_register_style. Ensin sidomme tyylitaulukkoomme kuvaajan. Sitten löydämme polun tyylisivullemme. Onneksi WordPressissä saat polun käyttämällä get_stylesheet_uri()-funktiota. Tämän jälkeen määritämme riippuvuudet. Style.css-tiedostomme riippuu Google Web Fonts -tyylisivusta.

Lopuksi käytämme wp_enqueue_scripts-koukkua kutsumaan funktiota:

Funktio.php-tiedosto on valmis. Nyt meidän on vain otettava viimeinen askel käyttääksesi valittua fonttia. Googlen ohjeiden neljäs vaihe näyttää, mitkä arvot meidän on välitettävä font-family-ominaisuuteen, jotta voimme käyttää fonttiamme. Haluan tehdä kaikki otsikoni Holtwood One SC -fontilla:

H1, h2, h3, h4, h5, h6 (fonttiperhe: "Holtwood One SC", serif; )

Ja haluan tehdä sivuston kuvauksen Rouge Script -fontilla:

Sivuston kuvaus (font-family: "Rouge Script", kursiivinen; )

Kaikki! Sinun ei tarvitse tehdä mitään muuta! Olet lisännyt Google Web Fontit WordPress-teemaasi. Käytä niitä vastuullisesti!

Tervehdys, rakkaat lukijat. Tänään puhumme google-fonteista (google-verkkofonteista), niiden lataamisesta ja liittämisestä sivustoon.

Mennään sivustolle www.google.com/fonts/, oikealla olevasta suodattimesta valitsemme: 1. halutun kategorian, 2. tarvittaessa lajittelemme ne ja 3. valitsemme tarvitsemamme kielen (jos tarvitset venäjän fontin vasemmanpuoleisesta valikosta, valitse Cyrillik).

Joten olemme valinneet fontin, nyt meidän on valittava sen tyyli, jotta voit tehdä tämän laajentamalla alareunassa olevaa paneelia ( Avaa valintalaatikko) ja siirry välilehdelle MUOKKAA ja valitse tarvitsemasi tyylit ja kielet.

Lataa napsauttamalla painiketta lataa.

Yhdistetään ladattua fonttia

Kopioi arkiston sisältämät fontit /fonts-kansioon, jonka tulee olla samassa hakemistossa kuin HTML-sivustosi /css-kansio.

Ladattujen fonttien vakioyhteys näyttää siltä

Minun tapauksessani yhteys näyttää tältä

/* Koodi, joka sisältää fontin muodossa /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") muodossa("truetype"); fontti - tyyli: normaali; fontin paino: normaali;

Voit yhdistää valitsemasi kirjasimen sivustoon siirtymällä välilehdelle UPOTTAA, näet 2 yhteystapaa:

1.STANDARDI

Tämä koodi on lisättävä osioon HTML-dokumenttisi.

2. @TUO

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Tärkeä. Riippumatta yhteystavasta, käytä seuraavia CSS-sääntöjä näiden perheiden määrittämiseen: font-family: 'Roboto', sans-serif; tästä lisää alla.

Kaiken oppiminen yksin ei ole helppoa, mutta erittäin mielenkiintoista. Jos sinulla on ainakin pinnallinen käsitys sivuston toiminnasta, niin projektisi toteuttamiseksi on parempi tehdä se itse. Samaan aikaan et vain säästä paljon rahaa, vaan myös opit paljon "temppuja", salaisuuksia jne. Google-fonttien käyttö ei yleensä herätä huomiota, vaikka niiden ansiosta blogista voi tulla paljon enemmän mielenkiintoista.

Palvelu

Aika kauan sitten Internetiin ilmestyi suuri verkkokirjasinpalvelu. Sen on kehittänyt Google. Käyttäjät voivat käyttää sitä ilmaiseksi. Huolimatta siitä, että tämän tyyppistä asennusta ei pidetä erittäin monimutkaisena, oli silti ihmisiä, jotka tekivät virheitä eivätkä pystyneet selviytymään palvelusta.

Yksinkertainen malli kehitettiin erityisesti tätä tarkoitusta varten. Nyt työskentely Google Fontsin kanssa on helpottunut ja kävijämäärät ovat kasvaneet. Myös kirjasto on laajentunut. Viime vuonna palvelua uudistettiin, mikä sai paljon positiivista palautetta. Nyt ihmisten on helpompi yhdistää kirjasimia verkkosivustoihinsa ja tarkastella niitä.

Ulkomuoto

Joten niille, jotka eivät ole koskaan käyneet vanhalla sivustolla, sinun on saatava kokonaiskuva muutoksista. Aiemmin palvelu näytti melko massiivisesta. Kaikkialla oli paksuja kehyksiä, näyttäviä sinisiä painikkeita, eikä grafiikka ollut korkeimmalla resoluutiolla. Kaikki tämä vaikutti vierailijaan merkittävästi.

Nyt kehittäjät ovat keskittyneet materiaalisuunnitteluun. Kaikki on saanut hienostuneita ominaisuuksia. Ulkonäkö on tullut "kevyempi". Hienovaraista animaatiota ja interaktiivisuutta tuli havaittavissa. Mikään muu ei häiritse sinua valitsemasta oikeaa Google Fonts -kirjasinta.

Resurssin kätevä mukauttaminen mobiililaitteille on ilmestynyt. Tällainen muutos ei tietenkään ole kovin havaittavissa innovaatioiden taustalla, mutta ottaen huomioon edellisen version virheet, se on "taivaan manna" innokkaille käyttäjille.

Tilaisuus

Suunnittelijat käyttävät usein tätä palvelua. Kokemuksestaan ja ammattitaidosta huolimatta he työskentelevät myös visualisoinnin parissa. Uudelleensuunnittelu tarjosi enemmän samanlaisia mahdollisuuksia, joiden avulla voit yhdistää etukäteen sen, mitä tarvitset myöhemmin projektissasi.

Siksi ongelma, joka liittyy siihen, miten yksi fontti vastaa toista väriä ja kolmas tausta, on kadonnut. Yritys lisäsi sivustolle lisää työkaluja ja yleissävyisen paletin, jonka avulla voit kokeilla ja selvittää, miltä tietty fontti näyttäisi tietyssä värissä.

Suosikit

Google Fonts -kirjasinpalvelun avulla käyttäjät voivat käyttää suosikkivaihtoehtojaan. Erityinen välilehti sisältää joukon tyylejä, joita kehittäjä suosittelee käytettäväksi. Nämä kokoelmat erottuvat muista. Ne ovat Googlen ja kolmansien osapuolien asiantuntijoiden kehittämiä. Useimmilla niistä on tietty tyyli ja erityinen filosofia.

Näytä

Yksi tärkeimmistä muutoksista koski fonttien valintaa. Tämä tarkoittaa, että aiemmin käyttäjä näki edessään tietyn kuvan lisäpainikkeineen ja suuren sinisen, joka lisäsi fontin kokoelmaan. Yleisesti ottaen tämä vaihtoehto näytti hyvältä, mutta laatikossa ei aina ollut riittävän hyvää kuvan resoluutiota tyylin kanssa, ja siksi oli vaikea määrittää yksiselitteisesti, miltä fontti näyttäisi.

Kysymyksiä esitettiin myös näistä lisäpainikkeista, joista ensisilmäyksellä tiedettiin vähän. Sinun piti joko osoittaa niitä tai käyttää niitä. Nyt kaikki on tullut enemmän tai vähemmän selväksi. Lisäominaisuuksia on ilmestynyt:

Valitse tietty lause, kappale tai mukautettu tekstielementti.
Fontin painon kokeilu.
Säädä kokoja nopeasti liukusäätimellä.

Muuten, Googlen kirjasinkokojen muuttaminen muuttui mukautuvammaksi, koska vain yksi esimerkki muuttui, ei kaikkea sivulla. Vanhassa versiossa käyttäjiä voitiin siirtää sivun toiselta puolelta toiselle, mutta uudessa versiossa pysyt vain muokkaamassasi esimerkissä.

Yhteys

Jos olet valmis käyttämään tätä palvelua, voit yrittää yhdistää kirjasimia resurssiisi. Linkin hankkimisprosessi on yleinen. Ongelmia saattaa ilmetä CMS-järjestelmästäsi riippuen. Jokainen käyttää omia menetelmiään. Siksi sinun on valittava eri vaihtoehdot eri projekteille.

Katsomme, kuinka saada linkki Google-fonttien yhdistämiseen. Sinun on siirryttävä viralliselle Google Fonts -sivustolle. Siellä selaat tyyliluetteloa ja valitset itsellesi parhaiten sopivan. Voit tehdä tämän napsauttamalla sen vieressä olevaa plusmerkkiä. Myöhemmin fontti lisätään erityiseen lohkoon sivun alareunassa.

Napsauta tätä lohkoa ja määritä se sitten. Täällä voit valita tyylin ja haluamasi aakkoset. Jos tarvitset Googlen kyrillisiä kirjasimia, tarkista kyrillinen rivi. Sen jälkeen luodaan linkki. Se löytyy samasta ikkunasta Upota-välilehdeltä. Sinun tarvitsee vain kopioida se tai käyttää koko HTML-koodia.

Yleensä sivuston asetuksissa on asetus fonteille ja väreille. On olemassa vakiovaihtoehtoja, ja voit lisätä edistyneitä. Ne sisältävät erillisen vaihtoehdon Google Fontsille. Jos sinun on sitten ladattava kirjasimia Supreme Google Webfonts -laajennuksen kautta.

Suosittuja vaihtoehtoja

On tietysti vaikeaa arvioida, mitkä tyylit ovat parempia, varsinkin eri verkkosivustojen aiheille. Kun luot verkkosivustoasi, muista, että sen ei pitäisi houkutella sinua, vaan yleisöäsi. Siksi on parempi tarkastella lähemmin kilpailevia sivustoja.

Yleensä kaupallisten resurssien osalta kukaan ei välitä tyyleistä. Loppujen lopuksi, jos näet kirjasimen Google Chromessa verkkokaupassa, et todennäköisesti keskity siihen. Mutta jos sinulla on blogi edessäsi, saatat todennäköisesti pitää joistakin asioista, mutta toiset päinvastoin ärsyttävät sinua.

Google Fonts on valmistellut monia kokoelmia, jotka sisältävät suosittuja tyylejä. He esimerkiksi haluavat käyttää Lobsteria yksittäisiin tekstilohkoihin. On vaikea lukea, kun koko artikkeli on kirjoitettu niin lihavoidulla kursiivilla. Mutta lisäosat ja lainaukset näyttävät hyvältä.

Bad Script on myös vaihtoehto blogeille. Kursivointi on vaikea lukea suuria määriä tekstiä, mutta se voi korostaa pääideaa. Tyyli jäljittelee käsialaa. Jura normaali 400 on mielenkiintoinen vaihtoehto kyrillisille aakkosille. Kirjoittaja väittää, että tämä on Sans Serif -perheen Eurostyle. Se näyttää todella hyvältä ja siinä on useita muunnelmia.

Fontit ovat valtavassa roolissa verkkosivujen suunnittelussa. Sama teksti, joka on kirjoitettu eri fonteilla, voi antaa ihmiseen täysin päinvastaisen vaikutelman.

Katso itse:

Jotkut kirjasimet näyttävät vakuuttavammilta, toiset kiinnostavampia.

Mutta kuinka yhdistää fontit sivustoon ja käyttää niitä missä haluat?

Tässä artikkelissa I Näytän sinulle 3 tapaa, jolla voit liittää mitä tahansa, mitä monipuolisimpia ja epätyypillisimpiä fontteja verkkosivustollesi. Ja sillä ei ole väliä mitä sisällönhallintajärjestelmää käytät: WordPress, Joomla, Drupal vai Open Cart.

Huomaat, että fonttien yhdistämisessä sivustoon ei ole mitään monimutkaista.

Sinä tulet oppimaan:

Menetelmä nro 1. Kirjasinten nopea yhdistäminen WordPress-sivustoon (vaikeusaste: ⭐ ⭐ ⭐)

Jos sivustollesi on asennettu premium-suunnitteluteema, voit yhdistää kirjasimia kahdessa minuutissa.

Esimerkiksi:

Haluat muuttaa artikkeliesi otsikoiden fonttia. Tätä varten:

1. Siirry hallintapaneelissa Teeman asetukset -osioon. Mallistasi riippuen tätä osaa voidaan kutsua hieman eri tavalla, mutta merkitys on aina sama - "teemaasetukset".

2. Siirry Typografia-osioon.

3. Valitse elementti, jonka fonttia haluat muuttaa (otsikot, kappaleet):

Jos sivustosi toimii toisella moottorilla tai teemasi ei tarjoa tällaisia asetuksia, siirry seuraavaan tapaan.

Menetelmä numero 2. Hyödynnä Google Fontsin teho
(vaikeusaste: ⭐ ⭐ ⭐ ⭐)

Oletko koskaan kuullut Google Fontsista? Lyhyesti sanottuna tämä on palvelu, jolla voit liittää yli 700 fonttia verkkosivustollesi.

Vaihe 1. Siirry palvelun viralliselle verkkosivustolle.

Vaihe 2. Etsi itsellesi sopivat kirjasinkokoelmasta. Oikeanpuoleisessa valikossa voit kaventaa ympyrää määrittämällä fontin kielen, tyylin ja suosion:

Jotta palvelu näyttää venäjän kieltä tukevia fontteja, valitse Kielet-kohdassa kyrillinen kirjasimia.

Vaihe 3. Kuvittele, että pidät Roboto-fontista. Napsauta "+" -kuvaketta:

Voit lisätä fontteja napsauttamalla "+" -kuvaketta.

Vaihe 4. Tämän jälkeen sinun on laajennettava ostoskoria valituilla fonteilla:

Mukauta-välilehdellä voit valita tyylin ja kielen. Tyylien osalta suosittelen valitsemaan vakiosarjan - normaali (400), kursivoitu (400 kursiivi), lihavoitu (700) ja kursivoitu-lihavoitu (lihavoitu 700 kursiivi):

Mutta jos tarvitset vain lihavoitun tyylin (otsikoille), valitse vain tämä.

Muista, että mitä enemmän tyylejä valitset, sitä raskaampi ladattava tiedosto on.

Vältä sivuston latausnopeuden hidastuminen valitsemalla mahdollisimman vähän kirjasintyylejä.

Vaihe 5. Palaa Embed-osioon ja valitse @IMPORT-välilehti. Kopioi seuraavaksi koodirivi, joka sisältää "@import" ja liitä se sivustosi CSS-tiedoston ensimmäiselle riville:

Jos sinulla on WordPress-sivusto, CSS-tiedosto sijaitsee todennäköisesti täällä: wp_content/themes/"teema"/css/... CSS-kansiossa on todennäköisesti Fonts-tiedosto, johon sinun on siirrettävä upotuskoodi Googlesta:

Sillä ei ole väliä, missä sisällönhallintajärjestelmässä sivustosi toimii, liitä vain koodi ja kaikki on tehty 👌

Koska fontit on ladattava ensin, vasta sitten kaikki muu - aseta fontin yhteyskoodi CSS-tiedoston alkuun.

Voit määrittää fontin tietyille verkkosivuston elementeille samassa CSS-tiedostossa.

Esimerkiksi:

Jos haluat antaa kaikille kappaleille Roboto-fontin, kirjoitan seuraavan: p ( font-family: Roboto;)

Menetelmä numero 3. Mukautettu fonttiyhteys CSS:n avulla (vaikeusaste: ⭐ ⭐ ⭐ ⭐ ⭐)

Jos olet tarpeeksi taitava, paras vaihtoehto on sisällyttää fontit itse CSS:n kautta. Tässä tapauksessa fontit sijaitsevat palvelimellasi erityisessä kansiossa. Mutta ensin sinun on hankittava ne jostain.

Mistä saada web-fontteja verkkosivustolle

Tiesitkö, että verkkofonttien käyttäminen edellyttää erikoislisenssin ostamista?

Yhdistä fontit ilmaisella lisenssillä. Helpoin tapa löytää ne on käyttää Fontsquirrel-palvelua, jonka me teemme.

Vaihe 1. Siirry palvelun viralliselle verkkosivustolle

Vaihe 2. Valitse oikeanpuoleisen valikon Kielet-osiossa kyrillinen.

Vaihe 3. Etsi sopiva fontti. Kiinnitä huomiota tyylien määrään.

Jos tyylejä on esimerkiksi 4, kirjoitetaan 4 tyyliä:

Fonttityylien merkintä - normaali (400/normaali), kursivoitu (kursivoitu), lihavoitu (700/lihavoitu), lihavoitu kursiivi (700 kursiivi).

Vaihe 5. Napsauta fontin nimeä ja siirry asetussivulle.

Vaihe 6. Siirry Webfont Kit -osioon. Valitse kaikki fonttimuodot ja napsauta Lataa @FONT-FACE KIT. Jos käytettävissä on vain 1-2 muotoa, ei ongelmaa.

Käytämme kirjasimien yhdistämiseen @Font-face

@font-face-direktiivin avulla voit yhdistää yhden tai useita fontteja sivustoosi. Mutta tällä menetelmällä on hyvät ja huonot puolensa.

Plussat:

CSS:n kautta voit yhdistää minkä tahansa muotoisia fontteja: ttf, otf, woff, svg.
Kirjasintiedostot sijaitsevat palvelimellasi - et ole riippuvainen kolmannen osapuolen palveluista.

Miinukset:

Jos haluat yhdistää fontin oikein, sinun on kirjoitettava erillinen koodi jokaiselle tyylille.
Tietämättä CSS:ää voit helposti hämmentyä.

Voit yksinkertaisesti kopioida valmiin koodini ja mihin sinun on määritettävä arvosi.

Vaihe 1. Siirrä ladatut kirjasintiedostot verkkosivustollesi. Tämä voidaan tehdä hosting-ohjauspaneelin tai FTP:n kautta.

Suosittelen luomaan fontit-kansion samaan hakemistoon kuin CSS-tiedostosi. Siirrä kaikki fonttitiedostot tähän kansioon.

Vaihe 2. Kirjoita seuraava merkintä aivan CSS-tiedoston alkuun:

@font-face(
font-family: "MyWebFont";
src: url(../fonts/WebFont.eot");
src: url(../fonts/WebFont.eot?iefix") format("eot"),
url(../fonts/WebFont.woff") muoto ("woff"),
url(../fonts/WebFont.ttf") muoto("truetype"),
url("../fonts/WebFont.svg#webfont") muoto("svg");
fontin paino: normaali;
font-tyyli: normaali;
}

Missä MyWebFont on fontin nimi ja src-ominaisuuden arvo (tiedot suluissa lainausmerkeissä) on niiden sijainti (suhteelliset linkit). Meidän on määritettävä jokainen tyyli erikseen.

Koska otamme ensin käyttöön normaalin tyylin, asetamme font-weight- ja font-style-ominaisuudet normaaliksi.

Vaihe 3. Kun lisäät kursiivia, kirjoita seuraava:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url(../fonts/WebFont-Italic.eot?iefix") format("eot"),
url(../fonts/WebFont-Italic.woff") -muoto ("woff"),
url(../fonts/WebFont-Italic.ttf") muoto("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") muoto("svg");
fontin paino: normaali;
kirjasintyyli: kursivoitu;
}

Jos kaikki on sama, vain annoimme font-style-ominaisuuden arvoksi kursivoitu.

Vaihe 4. Ota lihavoitu käyttöön lisäämällä seuraava koodi:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url(../fonts/WebFont-Bold.eot?iefix") format("eot"),
url(../fonts/WebFont-Bold.woff") -muoto ("woff"),
url(../fonts/WebFont-Bold.ttf") muoto("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight:bold;
font-tyyli: normaali;
}

Jos asetamme font-weight-ominaisuuden lihavoiduksi.

Muista määrittää kunkin tyylin fonttitiedostojen oikea sijainti.

Vaihe 5. Lisää lihavoitu kursivoitu kirjoittamalla seuraava:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url(../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url(../fonts/WebFont-Italic-Bold.woff") -muoto ("woff"),
url(../fonts/WebFont-Italic-Bold.ttf") muoto ("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") muoto("svg");
font-weight:bold;
kirjasintyyli: kursivoitu;
}

No, siinä kaikki :) Olet juuri lisännyt 4 kirjasintyyliä verkkosivustollesi.

Mutta on yksi huomautus - tämä kirjasinten yhteys ei näy oikein Internet Explorer 8 -selaimessa Lohdutuksena on, että niitä on vain vähän jäljellä.

Kuinka yhdistää kirjasimia sivustoille eri sisällönhallintajärjestelmissä

Sillä ei ole väliä, millä moottorilla sivustosi on (WordPress, Joomla, Drupal, Opencart) - jos sinulla on pääsy CSS-tiedostoon, voit yhdistää kirjasimia joko Google Fontsin kautta tai lataamalla ne palvelimellesi Fontsquirrelin kautta.

OK, nyt kaikki on ohi. Jos uskot, että tästä artikkelista voi olla hyötyä muille verkkovastaaville, jaa se sosiaalisissa verkostoissa.

Ja:

Tilaa uutiskirjeeni jotta et jää paitsi hyödyllisistä ja mielenkiintoisista blogikirjoituksista.