Een lettertype toevoegen vanuit Google Fonts. CSS-lettertypen verbinden. Werken met weblettertypen. Google-lettertypen. Waar moet je op letten?

laat een reactie achter 6,950

Natuurlijk zijn er verschillende plug-ins voor het gebruik van Google Web Fonts op uw WordPress-site, maar als u uw eigen thema ontwikkelt, moet u mogelijk de typografie van uw keuze er nauw aan verbinden, waarbij plug-ins worden omzeild. Hieronder laten we u zien hoe u Google Web Fonts in uw thema kunt gebruiken.

Laten we eerst naar de site gaan Google-weblettertypen en selecteer het lettertype dat we op het thema moeten toepassen. Met behulp van de speciale tools aan de linkerkant kunt u uw zoekopdracht verfijnen, aangezien er echt veel lettertypen zijn. Ik wist dat ik een vette schreef nodig had voor de titels en blogtitels, dus ik selecteerde schreef uit de vervolgkeuzelijst Categorieën en verplaatste vervolgens de schuifregelaar Dikte naar rechts.

Als gevolg hiervan zakten de 617 opties die ik voorstelde soepel naar 5. Je hebt nogal wat opties om een voorbeeld van de lettertypen te bekijken - je kunt zien hoe een woord, zin, alinea met tekst of poster eruit zou zien in het geselecteerde lettertype. U kunt een voorgedefinieerde tekst kiezen, u kunt uw eigen tekst instellen, de gewenste lettergrootte kiezen.

Zodra u het lettertype hebt gevonden dat u op uw site wilt gebruiken, klikt u op de knop Toevoegen aan verzameling.

U kunt tientallen lettertypen aan uw verzameling toevoegen. Dit is echter niet altijd nodig. Als je het kunt, wil dat nog niet zeggen dat je het moet doen. Probeer jezelf te beperken tot maximaal drie lettertypen. Beter nog, twee. Om prestatieredenen gebruik ik nog steeds graag een verouderd webveilig lettertype voor de hoofdtekst van mijn site, en bewaar ik weblettertypen voor kopteksten en andere elementen die speciale expressiviteit of aandacht vereisen. Maak u zorgen over de leesbaarheid van uw lettertypen - gebruik geen pakkend lettertype als uw bezoekers niet kunnen onderscheiden wat er staat.

Wanneer u uw lettertypen aan de collectie toevoegt, ziet u ze in het blauwe gedeelte onderaan de site. Zodra uw verzameling de lettertypen bevat die u wilt gebruiken, klikt u op de knop Gebruiken.

U komt dan op een scherm met een instructie in vier stappen. Het laat u zien hoe u lettertypen kunt gebruiken. Als u geselecteerde lettertypen wilt downloaden voor gebruik in een grafische editor, om ze te evalueren of om een aantrekkelijke screenshot.png voor uw thema te maken, hoeft u alleen maar op de knop Lettertypen downloaden helemaal bovenaan de pagina te klikken. Als u alleen een lettertype in uw thema wilt gebruiken, hoeft u het niet naar uw computer te downloaden.

In de eerste stap kunt u de stijlen en dikte van het aan te sluiten lettertype kiezen. In de tweede stap kunt u de tekenset selecteren die u wilt verbinden. U kunt ook evalueren hoe uw verzameling lettertypen de snelheid van het laden van pagina's zal beïnvloeden.

Nu gaan we verder met de derde stap, die niet meer zo eenvoudig is als de vorige. In de derde stap krijgen we de code die aan onze sites moet worden toegevoegd - drie verschillende opties. De standaardoptie kiezen - we zullen echter enigszins afwijken van de instructies van Google om gevestigde methoden te ondersteunen voor het toevoegen van stijlen aan WordPress-thema's. Kopieer in de code voor de standaardvariant alleen de URL die is opgegeven als het href-kenmerk voor de link-tag.

Open vervolgens het bestand Functions.php van het thema. We zullen een functie maken om de CSS te laden die we in ons thema zullen gebruiken:

Functie ggl_load_styles () ()

Zie het ggl-voorvoegsel voor mijn functie? Dit is een van de best practices voor WordPress. Voeg altijd de prefix van uw WordPress-functienamen toe om het risico op conflicten met andere functies in uw thema, child-thema of plug-ins te verkleinen.

Nu moeten we in deze functie onze stylesheet van Google registreren:

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

We gebruiken de functie wp_register_style. Het eerste argument is een descriptor, d.w.z. snelkoppeling die we kunnen gebruiken om later in onze code naar dit stijlblad te verwijzen. Het tweede argument is het pad naar het bestand. We gebruiken de URL die we in de derde stap van de Google-instructies hebben gekregen.

Vervolgens nemen we ons hoofdstijlblad voor ons thema op. Hopelijk heb je geen link-tag in de head-sectie van je header.php-bestand geplaatst? Zo ja, ga dan terug naar het bestand en verwijder die code. Voeg vervolgens de stylesheet toe aan uw functions.php-bestand:

Functie 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 "));))

We gebruiken de functie wp_enqueue_style. Het heeft dezelfde argumenten als wp_register_style. Eerst binden we een descriptor aan onze stylesheet. Dan krijgen we het pad naar onze stylesheet. Gelukkig kun je in WordPress het pad via de functie get_stylesheet_uri () krijgen. Vervolgens geven we de afhankelijkheden aan. Ons style.css-bestand is afhankelijk van het stijlblad van Google Web Fonts.

Ten slotte gebruiken we de wp_enqueue_scripts hook om onze functie aan te roepen:

Het bestand Functions.php is klaar. Nu moeten we de laatste stap zetten om het geselecteerde lettertype te gebruiken. De vierde stap in de instructies van Google laat zien welke waarden we moeten doorgeven aan de eigenschap font-family om ons lettertype te gebruiken. Ik wil al mijn koppen in Holtwood One SC maken:

H1, h2, h3, h4, h5, h6 (lettertypefamilie: "Holtwood One SC", schreef;)

En ik wil de beschrijving van de site in Rouge Script maken:

Sitebeschrijving (font-familie: "Rouge Script", cursief;)

Alles! U hoeft verder niets te doen! U hebt Google Web Fonts toegevoegd aan uw WordPress-thema. Gebruik ze verantwoord!

Het eerste deel van dit hoofdstuk is gewijd aan een inleiding tot CSS-lettertypen. Op deze pagina leert u hoe u lettertypen in CSS kunt opnemen, wat weblettertypen zijn en hoe u ermee kunt werken, welke lettertypeformaten er zijn, hoe u Google Fonts gebruikt. Laten we beginnen met een eenvoudig voorbeeld van het opnemen van een CSS-lettertype:

P (lettertypefamilie: Verdana;)

Dit stukje code betekent dat alle tags

Het lettertype is Verdana. De eigenschap font-family specificeert welk font of fontfamilie zal worden gebruikt. De juiste weergave van deze stijl in de browser van de gebruiker hangt af van het feit of het opgegeven lettertype op zijn computer is geïnstalleerd. In ons geval, als er geen Verdana-lettertype op de computer van de gebruiker staat, geeft de browser het standaardlettertype weer.

Ooit moesten ontwerpers bovendien verschillende fallback-lettertypen specificeren voor het geval de belangrijkste op de computer van de gebruiker ontbrak. Stel dat u de tekst wilt opmaken met het Verdana-lettertype en de Trebuchet MS, Geneva-lettertypen en elk schreefloos lettertype als reserve wilt installeren. Het is op deze manier geschreven:

P (lettertypefamilie: Verdana, "Trebuchet MS", Genève, schreefloos ;)

Bij het verwerken van deze code zal de browser eerst controleren op de aanwezigheid van het Verdana-lettertype op de computer van de gebruiker. Als het lettertype aanwezig is, de inhoud van de tags

Weergegeven in dit lettertype. Als het lettertype ontbreekt, zoekt de browser naar het volgende lettertype in de lijst - Trebuchet MS. Als dit lettertype ook ontbreekt, wordt het volgende lettertype gecontroleerd - Genève. Als de gebruiker Genève niet op zijn computer heeft, zal de browser een ander beschikbaar schreefloos lettertype selecteren en de tekst ermee weergeven.

Opmerking: in de code hebben we de naam van het Trebuchet MS-lettertype tussen aanhalingstekens geschreven. Het is noodzakelijk om de naam van het lettertype tussen dubbele of enkele aanhalingstekens te plaatsen wanneer het spaties bevat.

Wat een serif- en schreefloos lettertype is, kun je lezen op de Wikipedia-pagina.

Weblettertypen

De bovenstaande manier om lettertypen te gebruiken heeft een enorm nadeel - je bent beperkt in het aantal lettertypen. U zult tevreden moeten zijn met alleen die opties die hoogstwaarschijnlijk op de meeste computers zijn geïnstalleerd.

Hoe kunt u de keuze aan lettertypen vergroten om het pagina-ontwerp individueel te maken, originaliteit toe te voegen? Weblettertypen komen te hulp. Lees het hoofdstuk over hoe u ermee kunt werken.

Dus om het gewenste lettertype in de browser van de gebruiker weer te geven, moeten we dit lettertype naar zijn computer zelf downloaden. Dit is vrij eenvoudig te realiseren. Deze methode om lettertypen aan CSS te koppelen, biedt geweldige kansen voor ontwerpers. Maar het is de moeite waard om de vlieg in de zalf te noemen: ten eerste ondersteunt niet elke browser een bepaald lettertype-formaat (wat ertoe zal leiden dat het lettertype niet wordt weergegeven), en ten tweede, als het bestand met het lettertype veel gewicht heeft, kan het vertragen naar beneden om de pagina te laden.

Ondersteuning voor formaat

Hoe om te gaan met het probleem met de mismatch van het bestandsformaat? Laten we eens kijken naar de tabel met de meest populaire lettertype-indelingen en kijken welke browsers deze ondersteunen:

Opmerking: Op caniuse.com vindt u altijd de meest recente informatie over ondersteuning voor lettertype-indelingen. In de zoekbalk moet u de naam van het formaat invoeren (bijvoorbeeld ttf).

Als u zich op moderne browsers richt, hoeft u alleen het TTF-lettertypeformaat te gebruiken - de meest voorkomende en gebruikte. In het geval dat u meerdere formaten van één lettertype nodig heeft, kunt u speciale online converters van het ene formaat naar het andere gebruiken en vervolgens alle bestanden één voor één verbinden. De browser kan dus het lettertype-formaat kiezen waarmee het werkt.

Een weblettertype opnemen met @ font-face

Stel dat u uw eigen unieke lettertype MyUniqueFont in TTF-formaat heeft en u wilt de hoofdtekst van uw webpagina met dit lettertype weergeven. Het eerste dat u moet doen, is het lettertypebestand naar de map kopiëren waar alle andere sitebestanden zich bevinden. Om rommel te voorkomen, kunt u speciaal voor lettertypen een aparte map maken, bijvoorbeeld met de naam lettertypen.

@ font-face (font-familie: MyUniqueFont; src: url ("fonts / MyUniqueFont.ttf");)

De eigenschap font-family speelt in dit geval een andere rol: hiermee geven we een naam aan het font, zodat we deze naam vervolgens kunnen gebruiken bij het schrijven van de stijl:

P (lettertypefamilie: MyUniqueFont;)

De tweede regel bevat het pad naar het lettertypebestand. In ons voorbeeld bevindt het MyUniqueFont.ttf-bestand zich in de map fonts. Uw URL kan anders zijn.

Google-lettertypen

Google maakt het gemakkelijk om elk lettertype uit de verzameling Google Fonts op te nemen. Het enige dat u hoeft te doen om het gewenste lettertype te gebruiken, is een paar instellingen op de lettertypepagina in Google op te geven, vervolgens de speciale link naar dit lettertype te kopiëren en aan uw webdocument toe te voegen.

Opmerking: de volledige verzameling lettertypen van Google is beschikbaar op de site Google-lettertypen... Op de pagina kunt u verschillende filters gebruiken om lettertypen te zoeken op categorie, dikte, alfabet.

Hieronder beschrijven we elke stap van het koppelen van een lettertype van Google. Om te begrijpen waar dit over gaat, selecteert u een lettertype op de Google Fonts-pagina en opent u het door op de knop Snel gebruiken te klikken.

Stap 1: kies een gezicht

Allereerst worden op de pagina van het geselecteerde lettertype opties voor de stijl weergegeven, evenals het snelheidsmeterpictogram, wat niets meer betekent dan de laadsnelheid van het lettertype. Hoe meer stijlen je kiest voor een lettertype, hoe langer het duurt om het te downloaden. Daarom wordt aanbevolen om alleen die lettertype-opties te selecteren die u van plan bent te gebruiken.

Stap 2: kies een alfabet

Verderop op de pagina is het mogelijk om een set tekens te selecteren: Latijn, Cyrillisch, etc. Afhankelijk van het lettertype zijn mogelijk niet alle alfabetvarianten daarin beschikbaar. Net als bij het vorige punt, is het beter om alleen het vakje aan te vinken tegenover het alfabet dat je nodig hebt.

Stap 3: voeg de code toe aan de site

De eerste methode omvat het toevoegen van een link naar de Google-server in de HTML-code, van waaruit het lettertype wordt gedownload. U moet het kant-en-klare stukje code kopiëren en tussen de tags plaatsen in uw HTML-document. Voorbeeld:

...

De tweede manier is om het lettertype te verbinden met behulp van de @import-richtlijn. De voltooide code staat in het tweede tabblad van punt 3 op de pagina van het geselecteerde Google-lettertype. Het moet helemaal aan het begin van uw stylesheet worden toegevoegd (anders wordt het bestand niet geïmporteerd). De code ziet er als volgt uit:

@import url (http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Het bijzondere van de eerste methode is dat je een link naar het lettertype moet toevoegen in de kop van elke pagina waar je het wilt gebruiken. Dit is gemakkelijk te doen op sites met een klein aantal pagina's, maar problematisch voor grote bronnen. De tweede methode is handig omdat de code helemaal aan het begin van het externe stijlblad kan worden geplaatst, en dan krijgen alle pagina's waaraan deze tabel is gekoppeld het benodigde lettertype, dat wordt geladen met behulp van de @import-richtlijn.

Stap 4: creëer de stijl

Na het voltooien van de vorige stappen, kunt u beginnen met het toepassen van het lettertype. Je hebt eerder gezien hoe zo'n CSS-regel is geschreven:

P (lettertypefamilie: "Roboto", schreefloos ;)

Als je in de eerste stap verschillende opties voor de stijl hebt gekozen (bijvoorbeeld een variant van het vetgedrukte type Bold 700 toegevoegd), dan wordt in de derde stap de code enigszins gewijzigd:

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

Om het lettertype vetgedrukt te maken, schrijft u de CSS-stijl als volgt:

P (lettertypefamilie: "Roboto", schreefloos; lettertypegewicht: 700;)

Opmerking: Google Fonts gebruikt alleen conventionele eenheden van 100 tot 900 om het lettertypegewicht aan te geven. Normale stijl (standaard) is bijvoorbeeld gelijk aan 400 (normaal) en standaard vet is gelijk aan 700 (vet).

De belangrijkste voordelen van de Google Fonts-service zijn:

gebruiksgemak (zelfs een beginner kan de service achterhalen en alle benodigde code wordt automatisch gegenereerd - u hoeft deze alleen maar te kopiëren);
beschikbaarheid van lettertypen (u hoeft er niet voor te betalen);
alle gebruikte lettertypeformaten zijn aanwezig (dit betekent dat elke browser exact het lettertypeformaat kan downloaden waarmee hij werkt).

Een van de nadelen van de service is niet een erg grote verscheidenheid aan lettertypen, vooral Cyrillische. Trouwens, er zijn andere vergelijkbare services op internet, bijvoorbeeld TypeKit (betaald).

resultaten

Tegenwoordig hebben we verschillende opties om originele en niet-standaard lettertypen aan webpagina's te koppelen. Elk van deze methoden heeft zijn eigen voor- en nadelen. Welke van de opties het beste is om te gebruiken, moet u zelf bepalen. Dit is vaak afhankelijk van de situatie en in verschillende gevallen kunnen verschillende benaderingen nuttig zijn. Op dit punt hoeft u alleen maar te weten hoe u lettertypen in CSS moet gebruiken.

25 mei 2015 om 18:06

Google WebFonts en FontFaceObserver. We gebruiken lettertypen van derden op onze website

CSS,
JavaScript

WebLettertypen. Verhaal

WebFonts is een technologie voor het gebruik van lettertypen van derden op uw webpagina. Een voorbeeld:

Vanaf het begin werd de font-tag in 1995 geïntroduceerd en al in 1996 werd een programmatische definitie geschreven in CSS. Beginnend met de versie van CSS 2.0 werd het laden en synthetiseren van lettertypen in browsers geïntroduceerd, maar niettemin had het toen populaire, maar nu oude en irrelevante IE geen ondersteuning voor het downloaden van lettertypen, wat de snelle ontwikkeling van het gebruik van lettertypen op zijn plaats.

Op het internet zijn weblettertypen al lang een gevestigde waarde. Op verschillende sites kunnen we verschillende soorten lettertypen gebruiken, die op hun beurt niet zijn inbegrepen bij de levering van een bepaald besturingssysteem, maar er is een ongewenst neveneffect, waar we het vandaag over zullen hebben.

Bestandsformaten

Om fonts aan elkaar te koppelen gebruiken we programmatic insertion in CSS, de zogenaamde @ -rule. Dus, in zijn eenvoudigste vorm, is @ font-face zo'n verklaring. Het ziet er zo uit:

/ * Declareer het lettertype * / @ font-face (font-family: "Font name"; src: url ("path / to / him");) / * Pas het font toe * / p (font-family: "Font naam" , Arial ;)
TTF of OTF - een lettertypebestand dat ons bekend is, maar gedownload van de server tijdens het browsen op de site;

WOFF is een onbeschermd OTF- of TTF-bronarchief, misschien wel het belangrijkste formaat dat door de meeste populaire browsers wordt ondersteund, en WOFF-bestanden zijn meestal 2-2,5 keer lichter dan de originele;

EOT - een ingebed TT OpenType-archief met beveiligingsmechanismen, nodig om oude Internet Explorer-browsers te ondersteunen (vanaf IE8 wordt naast TrueType-curven ook PostScript ondersteund);

SVG - ter ondersteuning van de Safari-browser.

Lettertypen die zijn voorbereid voor implementatie (@ font-face) op een website van vandaag zouden in verschillende formaten tegelijk moeten zijn. U begrijpt dat er enkele discrepanties zijn, net zoals er meer dan één soort besturingssysteem is. Er zijn veel lettertype-indelingen, maar een specifieke werkt alleen in een specifieke browser. Wat betreft deze zelfde formaten, daarom zijn er zoveel die je moet specificeren wanneer je verbinding maakt, ze zijn nodig voor cross-browser ondersteuning van de site.

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") formaat ("embedded-opentype"), url ("Font_file_name .eot .woff ") formaat (" woff "), url (" Font_file_name.ttf ") formaat (" truetype "), url (" Font_file_name.svg # DSNoteRegular ") formaat (" svg "); lettertypegewicht: normaal ; lettertype -stijl: normaal;)
Als je een versleutelde code wilt gebruiken in plaats van een bestand, komt base64 ons in dit geval te hulp, dat werkt volgens hetzelfde principe met afbeeldingen, maar voor de oude IE wordt base64 niet verwerkt.

@ 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) formaat ("woff"), url (data: font / truetype; charset = utf-8; base64, DATA) formaat ("truetype"), url ("Font_file_name.svg # Font_file_name") formaat ("svg"); font-weight: normaal; font-style: normaal;)

Ingesloten OpenType?

Zoals je misschien hebt gemerkt, hebben de plug-in-lettertypen voor IE een regel met de volgende parameter:

Src: url ("Font_file_name.eot? #Iefix") formaat ("embedded-opentype")
In de klassieke versie moesten we precies zo met u aangeven:

Src: url ("Font_file_name.eot") formaat ("embedded-opentype")
Maar bij het toevoegen van de "?" na het lettertypeformaat dwingen we de browser om de volgende instructie niet te lezen - formaat ("embedded-opentype"). Internet Explorer ondersteunt sinds IE 4.0 het insluiten van lettertypen via de zogenaamde eigen Embedded OpenType-standaard. Het gebruikt een techniek voor het beheer van digitale rechten om het kopiëren van gelicentieerde lettertypen te voorkomen.

Wat als het lettertype niet wordt ondersteund in de browser?

Lang geleden zijn er al oplossingen bedacht, de zogenaamde "krukken" om een bepaald lettertype weer te geven. Er zijn momenten dat een lettertype alleen in SVG-indeling is ontworpen, of alleen in TTF-indeling.

1. In de oudheid namen ontwikkelaars een afbeelding op, die op zijn beurt tekst was die in een visuele editor was getypt. Nu wordt het echter als een slechte vorm beschouwd, omdat ondersteuning nogal moeilijk is (u moet de editor opnieuw openen om de tekst van de afbeelding te wijzigen), zodat de gebruiker de tekst van de afbeelding niet kan kopiëren.

2. Ook het gebruik van flitsoplossingen was wijdverbreid.

3. Een andere oplossing is om Javascript te gebruiken om tekst te vervangen door VML (voor Internet Explorer) of SVG (voor alle andere browsers).

Welke andere problemen kunnen zich voordoen?

De browser zal proberen het laden van het lettertype te synchroniseren, het zal proberen de tekst te verbergen, dat wil zeggen, het onzichtbaar maken totdat het lettertype is geladen. Dit effect wordt FOIT genoemd, het "witte flits"-effect.

Flitseffect

Het FOIT-effect in browsers zoals Safari, Chrome, Opera, Firefox heeft de neiging om de tekst maximaal 30 seconden te verbergen voordat het lettertype wordt geweigerd, waarna het standaardlettertype wordt ingesteld.

Een voorbeeld van hoe het lettertype wordt geladen:

Toch is 2,7 seconden lang!

Wat gedaan kan worden?

De oorspronkelijke aanpak was om de conversie van de lettertypebestanden naar de opgegeven URI's op te nemen, zodat die lettertypen direct konden worden opgenomen in de definities van de lettertypefamilie in het CSS-bestand. Door dit CSS-bestand asynchroon te laden, kunt u ervoor zorgen dat de browser de tekst op de pagina onmiddellijk weergeeft met aangepaste lettertypen en dat de nieuwe lettertypen worden toegepast zodra de CSS wordt geladen.

Bij elk experiment is er echter een bijwerking.

Aanvankelijk gebruikte Bram Stein een aangepast lettertype, maar nadat het lettertype was geladen, trad "flikkering" op, in het voorbeeld na 0,7 seconden:

Kortom, flikkering treedt op wanneer de browser probeert een lettertype uit de lettertypefamilie weer te geven en in de html toe te passen. Een lettertype gedefinieerd in de @ font-face-declaratie dat nog niet is geladen.

Bram Stein liet zien hoe je fonts correct verbindt, hij ontwikkelde een script, een alternatief van google voor het asynchroon laden van fonts, dit is een script - FontFaceObserver.

Proberen

Analyse

Google standaard verbinding

Eerlijk gezegd kan het gebruik van meer dan één lettertype op een site de laadsnelheid van een site specifiek vertragen, waardoor de algehele laadtijd toeneemt. Met de Google Fonts API kunt u snel een lettertype aan uw website toevoegen met behulp van een lettertypegenerator, waardoor uw website-ontwerp sneller wordt. Men moet zich echter bewust zijn van het FOIT-effect. De totale downloadtijd is 322 ms.

Web Font Loader van Google

Web Font Loader is een JavaScript-bibliotheek voor geavanceerd API-werk, een bibliotheek die ons meer controle geeft over het laden van lettertypen dan de standaard Google Fonts API. Het script stelt ons in staat om veel lettertypen te gebruiken, ze sequentieel of asynchroon te laden. In tegenstelling tot een standaardverbinding, tonen zwakke verbindingen tekst in een standaardlettertype totdat het lettertype is geladen.
Totale downloadtijd: 1132 ms

FontFaceObserver

FontFaceObserver is een JavaScript-bibliotheek (5 kb), een zogenaamde loader die compatibel is met elke weblettertypeservice. Met het script kunnen we ons laten weten of het lettertype is geladen of niet, het stelt ons in staat om de gebeurtenis te volgen na het laden en voordat het lettertype wordt geladen. Totale downloadtijd: 159 ms

Een schrift gebruiken.

Gegroet, beste lezers. Vandaag gaan we het hebben over Google-weblettertypen, hoe u ze kunt downloaden en verbinding kunt maken met de site.

We gaan naar de site www.google.com/fonts/, in het filter aan de rechterkant selecteren we: 1. de gewenste categorie, 2. sorteer ze indien nodig en 3. selecteer de taal die we nodig hebben (als je een Russisch lettertype nodig hebt in het menu aan de linkerkant, selecteer Cyrillisch).

Dus we hebben het lettertype geselecteerd, nu moeten we de stijl selecteren, hiervoor vouw je het onderstaande paneel uit ( Selectielade openen) en ga naar het tabblad AANPASSEN en selecteer de gewenste stijlen en talen.

Om te downloaden, klik op de knop downloaden.

Het gedownloade lettertype verbinden

Kopieer de lettertypen in het archief naar de map / fonts, die zich in dezelfde map moet bevinden als de map / css van uw HTML-site.

Standaardverbinding van gedownloade lettertypen ziet eruit als

In mijn geval ziet de verbinding er als volgt uit:

/ * Code voor het koppelen van een lettertype in /css/style.css * / @ font-face (font-familie: "RobotoRegular"; url ("../fonts / RobotoRegular.ttf") formaat ("truetype"); lettertype - stijl: normaal; lettergewicht: normaal;)

Om het lettertype van uw keuze aan de site te koppelen, gaat u naar het tabblad INTEGREREN, daar ziet u 2 verbindingsmethoden:

1. STANDAARD

Deze code moet worden toegevoegd aan de sectie uw HTML-document.

2. @IMPORT

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

Belangrijk. Ongeacht de verbindingsmethode, gebruik de volgende CSS-regels om deze families te definiëren: font-family: ‘Roboto’, sans-serif; meer hierover hieronder.

Het lettertype speelt een belangrijke rol in het ontwerp van de site; het kan de algemene stijl benadrukken en de gebruiker helpen bij het navigeren door de tekstinhoud. Zoeken naar gratis lettertypen en vervolgens een heleboel bestanden voor verschillende browsers verbinden is niet leuk, maar er is een uitweg - lettertypen van Google Fonts.

Het juiste lettertype vinden via Google Fonts

Laten we naar de Google-lettertypeservice zelf gaan en de mogelijkheden ervan bekijken.

In het linkerpaneel (zij) kunt u de parameters voor het filteren van lettertypen configureren en, belangrijker nog, selecteren of het tot het Cyrillische of Latijnse alfabet behoort.
In het bovenste gedeelte kunt u de weergave van de demotekst wijzigen, in de vorm van: woord, zin, alinea, poster. Wijzig de lettergrootte en voer uw eigen tekst in in plaats van de demoversie.

Een lettertype koppelen vanuit Google Fonts

Nadat u het gewenste lettertype heeft geselecteerd, klikt u op de knop "snel gebruiken" (zie onderstaande afbeelding)

Op de lettertypeverbindingspagina moet u het volgende selecteren:

1. Lettertypestijlen, vet, cursief, enz. Overklok niet te veel, kies alleen het meest noodzakelijke, want dit alles heeft invloed op de snelheid van het laden van het lettertype en dienovereenkomstig op de snelheid van het laden van de tekst op uw site. Volg de indicatoren van de sensor aan de rechterkant (punt 5 op de foto)
2. Kies welke tekens je nodig hebt in dit lettertype (voornamelijk Latijn en Cyrillisch).
3. Kopieer de code van de link-tag in het HEAD-blok
4. We gebruiken de declaratie van het lettertype in de stijlen zoals weergegeven in paragraaf 4 (zie afbeelding)