Основи на Google Font API - CSS-трикове

Връзка към CSS файлове

По същество правите бърза връзка директно към CSS файлове на Google.com. Чрез параметрите на URL, вие определяте кои шрифтове искате и какви вариации на тези шрифтове.

… 

Идея: Можете да избегнете допълнителна мрежова заявка, като отворите този лист със стилове и копирате и поставите нещата @ font-face в основния си лист със стилове. Но внимавайте: Google прави някои потребителски агенти, които подушват неща, за да обслужват понякога различни неща на различни устройства, ако е необходимо. Няма да се възползвате от това, ако се направи по този начин.

CSS

След това във вашия CSS можете да посочите тези нови шрифтове по име на всеки елемент, който искате да ги използвате.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Можете да използвате JavaScript на FontLoader, вместо да свързвате към CSS. Той има предимства, като контролиране на Flash of Unstyled Text (FOUT), както и недостатъци, като факта, че шрифтовете няма да се зареждат за потребители с изключен JavaScript.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Тези имена на класове, например .wf-loadingсе прилагат към елемента. Така че забележете, когато шрифтовете се „зареждат“, можете да използвате това име на клас, за да скриете текста. След това, когато се показват, направете ги видими отново. Така се контролира FOUT.