Могу ли я загрузить собственный шрифт в большой картель?

У меня есть определенный шрифт, который я использую на своих визитных карточках, и ради единообразия я хотел бы использовать его на своем сайте. Я не нахожу способ загрузить шрифт и не могу найти его в меню настройки. Помощь будет принята с благодарностью!


fonts bigcartel
person user3784551    schedule 27.06.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Да, вы можете загрузить собственный шрифт с помощью функции @fontface в CSS, но вам потребуется доступ к серверу для его хранения и загрузки. Я использовал тему Luna, и это сработало как шарм:

Вставьте этот код в свой файл CSS и замените URL-адрес правильным расположением вашего шрифта:

@font-face {
    font-family: CustomFontName;
    src: url(http://yourserver.com/fonts/customfontname.ttf); 
}

Я решил поместить свой в раздел «Элементы/Общие» моей темы, немного ниже начала вашего файла CSS.

Затем измените этот раздел вашего CSS:

/* Body Font */
body,
.product_header h3,
.product_header h5,
#product_inventory li h5,
#cart_items li .item_option,
#cart_summary li h3,
#social_links li h4,
.standalone .canvas p
{ font-family: {{ theme.body_font | font_family }}; }


/* Header Font */
h1, h2, h3, h4, h5, h6,
.button,
#error li,
#site_footer ul,
#site_footer #search input,
#main_nav li,
#cart_items li dt,
#cart_items li dd,
#cart_options #cart_discount p,
#cart_summary li span,
.standalone .canvas h1, input,
#cart_items li .quantity_input input
{ font-family: {{ theme.header_font | font_family }}; }

К этому:

/* Body Font */
body,
.product_header h3,
.product_header h5,
#product_inventory li h5,
#cart_items li .item_option,
#cart_summary li h3,
#social_links li h4,
.standalone .canvas p
{ font-family: CustomFontName; }


/* Header Font */
h1, h2, h3, h4, h5, h6,
.button,
#error li,
#site_footer ul,
#site_footer #search input,
#main_nav li,
#cart_items li dt,
#cart_items li dd,
#cart_options #cart_discount p,
#cart_summary li span,
.standalone .canvas h1, input,
#cart_items li .quantity_input input
{ font-family:CustomFontName; }

И все должно быть готово, шрифт будет меняться по всей вашей теме. Это было протестировано только на теме Luna, но я полагаю, что это должно работать универсально для всех тем.

bigcartel шрифты нестандартный

person mlab37    schedule 09.07.2014
comment
Вы тестировали этот кросс-браузер, кажется, он работает только для меня в Safari, потому что я получаю сообщение об ошибке в других браузерах: Запрос кросс-происхождения заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу example.com/GearedSlab-Thin.woff. (Причина: заголовок CORS «Access-Control-Allow-Origin» отсутствует). - person pinkp; 08.07.2019

arrow_upward
-1
arrow_downward

Чтобы это работало в кроссбраузерном режиме, вам необходимо получить доступ к файлу .htaccess на сервере, где размещен шрифт, и добавить следующую строку:

Header set Access-Control-Allow-Origin "*"

Документы здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

person pinkp    schedule 08.07.2019