Vendero - problem z własnym fontem

[Patryk Wyrwas 4]

Mam problem z wyświetlaniem własnych fontów na sklepie Vendero. Co dziwniejsze, problem jest niepowtarzalny. Występuje u niektórych użytkowników. U innych fonty wyświetlane są poprawnie. Strona: petshoprumia.pl

 

Poniżej kod CSS odpowiadający za implementacje własnych fontów.

@font-face {
    font-family: 'Mr Dodo';
    src: url('https://ipetyou.pl/font/MrDodo-Regular.eot');
    src: url('https://ipetyou.pl/font/MrDodo-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://ipetyou.pl/font/MrDodo-Regular.woff2') format('woff2'),
        url('https://ipetyou.pl/font/MrDodo-Regular.woff') format('woff'),
        url('https://ipetyou.pl/font/MrDodo-Regular.ttf') format('truetype'),
        url('https://ipetyou.pl/font/MrDodo-Regular.svg#MrDodo-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: 'Veneer Two';
    src: url('https://ipetyou.pl/font/VeneerTwo.eot');
    src: url('https://ipetyou.pl/font/VeneerTwo.eot?#iefix') format('embedded-opentype'),
        url('https://ipetyou.pl/font/VeneerTwo.woff2') format('woff2'),
        url('https://ipetyou.pl/font/VeneerTwo.woff') format('woff'),
        url('https://ipetyou.pl/font/VeneerTwo.ttf') format('truetype'),
        url('https://ipetyou.pl/font/VeneerTwo.svg#VeneerTwo') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}

U niektórych wyświetla się tak:

 

A powinno tak:

 

[Paweł Żółtaniecki 17]

Dzień dobry Panie Patryku,

gdzie umieszcza Pan ten widget własny?

Czy w nim znajduje się coś poza stylami css? Mogę prosić o pełny kod widgetu (może być w wiadomości prywatnej)?

Czy jest Pan pewien, że inny widget własny nie sprawia problemu?

Czy użyty jest powyżej szablon vendero czy jakiś własny?

 

Z wyrazami szacunku,

Paweł Żółtaniecki

[Patryk Wyrwas 4]

3 minuty temu, Paweł Żółtaniecki napisał:

Dzień dobry Panie Patryku,

gdzie umieszcza Pan ten widget własny?

Czy w nim znajduje się coś poza stylami css? Mogę prosić o pełny kod widgetu (może być w wiadomości prywatnej)?

Czy jest Pan pewien, że inny widget własny nie sprawia problemu?

Czy użyty jest powyżej szablon vendero czy jakiś własny?

 

Z wyrazami szacunku,

Paweł Żółtaniecki

Widget własny jest w nagłówku, jako pierwszy blok. Jest tam tylko <style>, jednakże został on umieszczony testowo (nic nie zmienił). W pierwszej kolejności @font-face zostały umieszczone w pliku css od szablonu.

szablon Vendero, jednakże wgrany jako własny ze zmienionymi stylami css (tylko kolory tak naprawdę, plus fonty)

[Paweł Żółtaniecki 17]

Panie Patryku,

 

dobrze rozumiem, że te fonty działają, gdy są dodane do szablonu własnego, a nie działają, gdy są dodane widgetem własnym?

Mogę prosić o link do sklepu, gdzie te czcionki działają, bo wydaje mi się to niemożliwe? 

 

Problem jaki występuje udało mi się namierzyć. To przekroczenie granic CORS.

Domyślne zachowanie tego mechanizmu jest zależne także od przeglądarki. W przypadku Safari na Mac'u czcionki zaczytują się poprawnie, gdyż polityka Safari wobec czcionek jest mniej restrykcyjna niż np. Edge, Chrome itd. Stąd może być wrażenie, że problem jest niepowtarzalny.

 

Z wyrazami szacunku,

Paweł Żółtaniecki

Edytowane 18 Lipca 2023 przez Paweł Żółtaniecki

[Patryk Wyrwas 4]

@Paweł Żółtaniecki
 

Na urządzeniach Windows oraz Android nie działają niezależnie od przeglądarki oraz metody implementacji. Chyba, że są wgrane lokalnie to wyświetlane są poprawnie. Nie są „zaciągane” z serwera. 

 

Na systemach Apple czy to Mac czy iPhone działają na każdej możliwej przeglądarce.

 

Jak usunąć owy błąd CORS? Jak powinna wyglądać implementacja własnych fontów w Vendero aby zrobić to poprawnie i były wczytywane niezależnie od systemu operacyjnego/przeglądarki?

Edytowane 18 Lipca 2023 przez Patryk Wyrwas

[Paweł Żółtaniecki 17]

Mamy w tym momencie dostępne na vendero czcionki customowe np. Courgette.

Poniżej linki do plików tej czcionki

 

https://www.pasaz24cdn.pl/public/Fonts/Courgette/Courgette-Regular-webfont.eot

https://www.pasaz24cdn.pl/public/Fonts/Courgette/Courgette-Regular-webfont.ttf

https://www.pasaz24cdn.pl/public/Fonts/Courgette/Courgette-Regular-webfont.woff

https://www.pasaz24cdn.pl/public/Fonts/Courgette/Courgette-Regular-webfont.woff2

 

Czy mógłby Pan sprawdzić na swoim szablonie własnym czy te czcionki są dla Pana dostępne na windows?

 

Z wyrazami szacunku,

Paweł Żółtaniecki

Edytowane 18 Lipca 2023 przez Paweł Żółtaniecki

[Patryk Wyrwas 4]

@Paweł Żółtaniecki

 

Zaimplementowałem font kodem:

 

@font-face {
    font-family: 'Courgette';
    src: url('https://pasaz24.blob.core.windows.net/public/Fonts/Courgette/Courgette-Regular-webfont.eot');
    src: url('https://pasaz24.blob.core.windows.net/public/Fonts/Courgette/Courgette-Regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://pasaz24.blob.core.windows.net/public/Fonts/Courgette/Courgette-Regular-webfont.woff2') format('woff2'),
        url('https://pasaz24.blob.core.windows.net/public/Fonts/Courgette/Courgette-Regular-webfont.woff') format('woff'),
        url('https://pasaz24.blob.core.windows.net/public/Fonts/Courgette/Courgette-Regular-webfont.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}

oraz zmieniłem na chwilę fonty w znaczniku p {

Na Windows się wyświetla font Courgette, tam gdzie powinien, jednakże na Androidzie (Chrome) już nie... iOS wyświetla wszystkie fonty.

Można sprawdzić na petshoprumia.pl pozostawiłem kody css

[Patryk Wyrwas 4]

@Paweł Żółtaniecki okazało się, że font był zainstalowany na Windows, stąd jego wyświetlanie. Po deinstalacji wyświetla się losowy font tam gdzie powinno Courgette

[Paweł Żółtaniecki 17]

@Patryk Wyrwasa ten kod zmienił Pan w szablonie czy widgecie własnym? Z tego co widziałem to font face nie działa w widgecie własnym przynajmniej u mnie.

Dalej widać że fonty pobierane są z ipetyou.pl. 

Proszę też o użycie linków url z domeny https://www.pasaz24cdn.pl. Wcześniej coś namieszałem z linkami. Post wyżej już poprawiłem.

Edytowane 18 Lipca 2023 przez Paweł Żółtaniecki

[Patryk Wyrwas 4]

32 minuty temu, Paweł Żółtaniecki napisał:

@Patryk Wyrwasa ten kod zmienił Pan w szablonie czy widgecie własnym? Z tego co widziałem to font face nie działa w widgecie własnym przynajmniej u mnie.

Dalej widać że fonty pobierane są z ipetyou.pl. 

Proszę też o użycie linków url z domeny https://www.pasaz24cdn.pl. Wcześniej coś namieszałem z linkami. Post wyżej już poprawiłem.

Usunąłem @font-face z kodu css (również z widgetu własnego). Zostawiłem tylko ten odpowiedzialny za Państwa font własny. Plik CSS: https://www.pasaz24cdn.pl/web6198/template/css/szablon_przykladowy_vendero.css

Jednakże nie przyniosło to zmian. Wciąż nie działa na Windows i Android, na iOS tak.

 

[Paweł Żółtaniecki 17]

@Patryk Wyrwas mogę prosić o screena z z błędem dla pliku z pasaz24cdn? Czy pojawia się ten sam komunikat co poprzednio czyli błąd CORS: 

Pozdrawiam

[Patryk Wyrwas 4]

7 minut temu, Paweł Żółtaniecki napisał:

@Patryk Wyrwas mogę prosić o screena z z błędem dla pliku z pasaz24cdn? Czy pojawia się ten sam komunikat co poprzednio czyli błąd CORS: 

Pozdrawiam

Państwa font nie wyświetla błędu CORS w konsoli Chrome, jednakże font tak czy siak nie wyświetla się na wcześniej wspomnianych systemach.

Nie wiem w czym może być problem, raczej wszystko jest ustawione poprawnie. 

[Paweł Żółtaniecki 17]

@Patryk Wyrwas a czy wykonywany jest request, który pobiera nasz font?
Proszę też o przesłanie w wiadomości prywatnej państwa szablonu własnego do celów testowych. Szablon nie będzie używany do celów innych niż pomoc w rozwiązaniu tego problemu.

Edytowane 18 Lipca 2023 przez Paweł Żółtaniecki

[Patryk Wyrwas 4]

9 minut temu, Paweł Żółtaniecki napisał:

@Patryk Wyrwas a czy wykonywany jest request, który pobiera nasz font?
Proszę też o przesłanie w wiadomości prywatnej państwa szablonu własnego do celów testowych. Szablon nie będzie używany do celów innych niż pomoc w rozwiązaniu tego problemu.

Rzeczywiście font się nie pobierał przez literówkę , zamiast ; w kodzie css od @font-face

Teraz chyba (proszę o potwierdzenie) Państwa font wyświetla się na stronie.

Pytanie jak zrobić aby nasze dwa fonty również działały.

 

Wiadomość z załącznikiem już wysyłam.

Edytowane 18 Lipca 2023 przez Patryk Wyrwas

[Paweł Żółtaniecki 17]

@Patryk Wyrwas

Dodałem te czcionki do naszego cdna. Proszę ich użyć. Powinny zadziałać.

• Czcionka MrDodo Regular znajduje się pod ścieżką: https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular np. https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular/MrDodo-Regular.eot
• Czcionka VeneerTwo znajduje się pod ścieżką:  https://www.pasaz24cdn.pl/public/Fonts/VeneerTwo np. https://www.pasaz24cdn.pl/public/Fonts/VeneerTwo/VeneerTwo.eot

Wystarczy, że zmieni Pan adres https://ipetyou.pl/font/ na https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular i https://www.pasaz24cdn.pl/public/Fonts/VeneerTwo

 

Z wyrazami szacunku,

Paweł Żółtaniecki

[Patryk Wyrwas 4]

Godzinę temu, Paweł Żółtaniecki napisał:

@Patryk Wyrwas

Dodałem te czcionki do naszego cdna. Proszę ich użyć. Powinny zadziałać.

• Czcionka MrDodo Regular znajduje się pod ścieżką: https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular np. https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular/MrDodo-Regular.eot
• Czcionka VeneerTwo znajduje się pod ścieżką:  https://www.pasaz24cdn.pl/public/Fonts/VeneerTwo np. https://www.pasaz24cdn.pl/public/Fonts/VeneerTwo/VeneerTwo.eot

Wystarczy, że zmieni Pan adres https://ipetyou.pl/font/ na https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular i https://www.pasaz24cdn.pl/public/Fonts/VeneerTwo

 

Z wyrazami szacunku,

Paweł Żółtaniecki

Czy na pewno fonty zostały wgrane? Nie są pobierane z serwera, wyskakuje błąd 404

 

[Paweł Żółtaniecki 17]

@Patryk Wyrwas

Z tego co widzę pobiera Pan fonty z adresu np. https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular.woff2, a należy to robić z https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular/MrDodo-Regular.woff2.

 

Pozdrawiam,

Paweł Żółtaniecki

[Patryk Wyrwas 4]

47 minut temu, Paweł Żółtaniecki napisał:

@Patryk Wyrwas

Z tego co widzę pobiera Pan fonty z adresu np. https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular.woff2, a należy to robić z https://www.pasaz24cdn.pl/public/Fonts/MrDodoRegular/MrDodo-Regular.woff2.

 

Pozdrawiam,

Paweł Żółtaniecki

Dziękuję bardzo za zaangażowanie i pomoc. Wydaje się wszystko działać

[Paweł Żółtaniecki 17]

Cała przyjemność po mojej stronie