Перейти до вмісту

Як вставити власні шрифти в шаблон

Кількість показів: 544 1 хв читання

Якщо ми створюємо власний шаблон рахунка-фактури і хочемо вшити в нього спеціальні шрифти, то можна додати їх двома способами:

Додати шрифти до файлу CSS, як описано нижче

@font-face {
font-family: 'NAZVA-SHRYFTU';
src: url('SHLYAKH-DO-FAYLU-SHRYFTU.eot');
src: url('SHLYAKH-DO-FAYLU-SHRYFTU.eot') format('embedded-opentype'),
url('SHLYAKH-DO-FAYLU-SHRYFTU.woff') format('woff'),
url('SHLYAKH-DO-FAYLU-SHRYFTU.ttf') format('truetype'),
url('SHLYAKH-DO-FAYLU-SHRYFTU.svg') format('svg');
font-weight: normal;
font-style: normal;
}

або завантажити шрифти з google fonts  як зазначено нижче:

<link href="//fonts.googleapis.com/css?family=NAZVA-SHRYFTU​:400,700" rel="stylesheet" type="text/css" />

Завантажений шрифт може виглядати так:  https://fonts.google.com/share?selection.family=Montserrat:ital,wght@0,100..900;1,100..900 Нам потрібно створити новий шаблон через Налаштування > Налаштування акаунта > Шаблони вибрати базовий шаблон, і на самому верху CSS додати рядки з імпортом та: 

*{ 
font-family:'nazva shryftu'; 

УВАГА:

при додаванні шрифтів з власного сервера необхідно належним чином налаштувати власний сервер. Цей метод називається CORS (Cross-origin resource sharing). Тут описано, що потрібно налаштувати на власному сервері:

http://enable-cors.org/server.html

Загальний опис CORS:

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Зразок CORS для AWS S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Чи була ця інформація корисною?

Поділитися

Коментарі