System fonts

[deinurlaubsdealParticipant]

Hi there,

on my whole website I am using “system fonts” and I also would like to set this fonts style for Ajax Search Pro. In the styling options I did not see any possibility to make the change.

Could you please help me out or provide custom CSS code for system fonts for Ajax search pro?

Thanks,
Caio

[Ernest MarcinkoKeymaster]

Hi,

You can enter custom fonts to the typography here: https://i.imgur.com/rsycD65.png

For simplicity, you can also use a custom CSS to force fonts across all of the plugin elements:

.asp_w, asp_w * {
    font-family: 'My font' !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[deinurlaubsdealParticipant]

Hi Ernest,

I use the following code in custom CSS to have system fonts on my website:

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;}

I used the custom CSS you provided but it does not appear to work for my search bars.

For the method you sent in the screenshot: What should I insert instead of “Your font name”?

Thanks,
Caio

[Ernest MarcinkoKeymaster]

Hi,

Those custom CSS rules are not specific enough to override the plugin fonts. Based on your custom CSS, try this:

.asp_w, asp_w * {
    font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[deinurlaubsdealParticipant]

Hi,

just tried it but for some reason it is stil not working. 🙁

Could you please check again?

Thanks,
Caio

[Ernest MarcinkoKeymaster]

Sorry, I made a mistake there:

.asp_w, .asp_w *, .asp-try * {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[deinurlaubsdealParticipant]

Works! Thank you!

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts