Import font does not work on mobile - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
November 16, 2023 at 11:15 pm #1425788
lauragrashoff
Participant
Hey,

I’m having a problem with my font displaying on mobil.

I imported the font “calibri” into Theme Options and it works. It is also partially displayed correctly in the mobile view.

However, I use this code so that the Font is also displayed as subheading:
```
#top .av-special-heading .av-subheading.av-subheading_above {
font-size: 32px !important;
    font-family: 'calibri'!important; 
    font-style: italic; bold !important; 
    color: #ff0044 !important;
}
```
And no matter what I do, the exact subheading is not displayed in the correct font on mobil.

Do you have an idea how I can solve the problem? I really want to keep the font in the subheading.

Best regards!
November 17, 2023 at 12:49 pm #1425830

Ismael
Moderator

Hey lauragrashoff,

Thank you for the inquiry.

Did you upload the font in the Custom Font Manager? Please note that only Google Fonts are allowed in the manager; other fonts must be added manually using the @font-face rule. For more info, please check the link below.

// https://www.w3schools.com/cssref/css3_pr_font-face_rule.php

Best regards,
Ismael

November 17, 2023 at 9:36 pm #1425872
lauragrashoff
Participant
Hey Ismael,

thanks for the tip. I didn’t know that! I

have now uploaded the font (calibriz.ttf) to /fonts and added @font-face rule:
```
@font-face {
  font-family: calibriz;
  src: url (fonts/calibri-cursiv-bold.ttf);
}
```
(The “z” is not a mistake.)

However, the font is still not displayed. Do you know what that could be?
November 19, 2023 at 9:06 pm #1426002
Mike
Moderator
Hi,
Thank you for your patience and the link to your site, when I check it looks like you found the error because when I download your font and compare it to your site it is showing correctly.
```
@font-face {
    font-family: 'calibri-cursiv-bold';
    src: url('/wp-content/uploads/avia_fonts/type_fonts/calibri-cursiv-bold/calibriz.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: auto
}
```
note the characters with the arrows:

Unless there is anything else we can assist with on this issue, shall we close this thread then?

Best regards,
Mike
November 19, 2023 at 9:37 pm #1426004
lauragrashoff
Participant
Hey Mike,

many thanks for your response!

It’s not about the font in the headlines, but in the subline above, which I want to enforce with code:
```
#top .av-special-heading .av-subheading.av-subheading_above {
font-size: 32px !important;
    font-family: 'calibri'!important; 
    font-style: italic; bold !important; 
    color: #ff0044 !important;
}
```
Everything was displayed correctly on the desktop, but not on mobile. Safari displays a different font.

Since the font face rule, the correct font is no longer displayed on the desktop:
November 19, 2023 at 10:28 pm #1426007
Mike
Moderator
Hi,
The subline above is calling the font-family “calibriz” which is not correct, it should be font-family “calibri-cursiv-bold”
So please correct your css to this:
```
#top .av-special-heading .av-subheading.av-subheading_above {
font-size: 32px !important;
    font-family: 'calibri-cursiv-bold'!important; 
    font-style: italic; bold !important; 
    color: #ff0044 !important;
}
```
then clear your browser cache and check.

Best regards,
Mike
November 19, 2023 at 10:38 pm #1426009

lauragrashoff
Participant

While I was going back and forth and trying things out, I completely overlooked it!

Thank you! Now the font looks as it should on desktop and mobile. :)

I wish you a nice evening!

November 19, 2023 at 11:04 pm #1426011

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Import font does not work on mobile’ is closed to new replies.