[GDPR] Зареждай Google Fonts локално

В тази статия ще демонстрирам как можеш да заредиш Google Fonts (и не само) локално за твоя сайт. Не е нужно да си с WordPress! На теория това, което ще прочетеш в публикацията следва да бъде приложимо за всеки един сайт, без значение как е изграден. От теб се изисква да имаш базови познания по CSS и работа с твоя хостинг.

Защо да зареждам Google Fonts (и не само) локално? Каква е връзката с GDPR?

Ще се постарая да съм кратък и ясен. Google Fonts е революционна възможност да имаш красиви, съвременни и безплатни шрифтове! Но, ако ги използваш директно от сървърите на Google на практика може да се счита, че нарушаваш GDPR!

След като изяснихме това, нека да поясня, защо считам че зареждането на шрифтове от чужди сървъри е нарушение на GDPR. Защото посетителят, попадайки на твоя сайт, ще изпрати своето IP към чуждия сървър. Както вече сигурно знаеш от статията ми за общите положения за GDPR, IP адресите са определени като лични данни. Следователно е важно или да не изпращаш такава информация косвено или ако ще го правиш да е след изрично съгласие от страна на посетителя.

Това беше от гледна точка на GDPR. Има обаче и друга причина, която вече касае фактора скорост, който е важен за SEO. Хипотетично е възможно при зареждане на съдържание от чужд сървър, да има някакво забавяне на зареждането на твоя сайт. Това не следва на 100% да означава, че ако зареждаш шрифта от своя сървър, задължително ще имаш подобрение на скоростта. Да кажем, че по-скоро има шанс да избегнеш евентуално забавяне в първия случай и/или липса на зареден шрифт, ако чуждия сървър е временно спрян.

Как да заредя Google Fonts (и други шрифтове) локално?

Стъпките по-долу ще са конкретно за Google Fonts. Но при съвпадащи обстоятелства, можеш да ги приложиш и за други шрифтове. И така – първо посещаваш сайта на Google Fonts. Харесваш си шрифт и след това избираш възможността да го изтеглиш. Към датата на създаване на публикацията, бутонът се казва „Download Family“. Напомням да се запознаеш с лиценза на всеки шрифт, за да си наясно дали е ОК да го използваш безпроблемно за твоя сайт. Този лиценз е наличен на отделната страница за всеки шрифт.

При изтегляне на шрифта, би следвало да получиш ZIP архив. Разархивирай го локално и виж съдържанието му. Възможно е вътре да има няколко разновидности на шрифта (bold, italic и други) под формата на отделни файлове. Избери тези от тях, които желаеш и обърни внимание на разширението им. Ако то е различно от WOFF (в повечето случаи следва да е TTF) следва да направиш конверсия към този формат. Така ще постигнеш съвместимост с различните браузъри.

Намери си подходящ конвертор за преобразуване на формата в WOFF или WOFF 2.0. Аз използвам ето този, но сигурно онлайн (или офлайн) има и други възможности. След конверсията вземи новополучените файлове в желания формат и ги качи на твоя сървър в директория по твой избор, която обаче да е публично достъпна за четене.

Сега следва да добавиш шрифта към твоя главен CSS файл или към друг CSS файл, който използваш за шрифтове и промени по дизайн. В WordPress можеш да използваш и плъгини за custom CSS. За целта можеш да добавиш следния примерен код:

@font-face {
font-family: 'ИМЕТО НА ИЗБРАНИЯ ШРИФТ';
src: url('ЛИНК КЪМ МЯСТОТО НА СЪРВЪРА, КЪДЕТО Е КАЧЕН ШРИФТА') format('woff');
font-weight: normal;
font-style: normal;
}

Малко пояснения по кода. Името (фамилията) на избрания шрифт ще я вземеш от Google Fonts или по-точно спрямо шрифтовете в изтегления архив. Примерно за шрифт Lobster (който аз използвам за заглавия и подзаглавия) съм вписал само Lobster. Можеш да впишеш и Lobster-Regular, ако желаеш. При Roboto в архива имаш различни видове шрифтове и за regular варианта следва да впишеш roboto-regular.

За url (особено, ако си конвертирал към формат WOFF -> примерът по-горе е с този формат) можеш да добавиш абсолютен линк, започваш с домейна ти, минаващ през директориите и поддиректориите, докато достигнеш до неговата локация и завършващ с файла на шрифта. Това, пак повтарям, е за улеснение. От IT гледна точка не е най-правилният (макар и работещ) вариант. По-правилно е да използваш relative път към шрифта, но за това ще трябва да отделиш малко допълнително време за разучаване. При WordPress следва да съобразиш и директорията на твоята тема и други зависимости. Ето защо може би ще ти е по-лесно да сложиш абсолютен линк. Той ще е нещо от сорта на: ‘https://ТВОЯТ ДОМЕЙН/Lobster-Regular.woff’. Примерът отново е за Lobster, като приемаме, че си поставил конвертирания шрифт директно в главната публична директория на сайта ти.

За font-weight и font-style можеш да слагаш различни стойности в зависимост от това как искаш да изглежда избрания шрифт. Ако не си сигурен, можеш да оставиш стойностите в посочения в кода по-горе вид. Т.е. ще зареждаш шрифта с нормални стойности. Повече по темата прочети тук и тук.

След като си добавиш шрифта си, следва да упоменеш къде искаш да се визуализира. Хипотетично, ако вече си ползвал Google Fonts със зареждане от сървърите на Google, следва само да махнеш кода (или плъгина ако си в WordPress), който осъществява това зареждане и след изчистване на кеша на твоя сайт и на твоя браузър следва всичко да работи коректно. Това е така, защото се предполага, че някъде в настройките на твоя сайт (ако е на WordPress или друг CMS) или в неговите CSS файлове вече следва да е добавена инструкция кои HTML елементи да зареждат с избрания шрифт.

Ако добавяш шрифта тепърва или след премахване на зареждането от сървърите на Google си загубил настройки и/или CSS код, тогава ще ти дам един пример за зареждане на всички H1 и H2 елементи с Lobster (ако за font-family в предходния код е въведено Lobster):

h1, h2 {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
}

Отново следва да изчистиш кеша на сайта и на браузъра и всички H1 и H2 елементи вече ще са с този шрифт. Аналогично можеш да го добавиш по сходен начин и за други елементи. Препоръчвам да се запознаеш повече с CSS за тази цел. А по-важното е, че ако отвориш Network таба на твоя браузър (би следвало да успееш с F12) ще видиш, че шрифта зарежда от твоя домейн и така не изпраща данни към чужди сървъри.

С това публикацията завършва. Ако имаш въпроси, мнения, критики или препоръки – формата за коментар е на твое разположение. До нови срещи!