Question 45764 in CSS Question posted in
Some basic documentation can be found here.

Change the font in pagination links – CSS

I’m trying to change the font of this pagination.

pic 1

I’m using a builder but the settings to change it are not available so I tried inspecting the code to get the right class or id and use css instead.

I’m using this code

.pagination li a {
font: Raleway !important;}

and it’s still not changing. I hover over the element and I see this:
pic 2
pic 3

what should I need to change to achieve this? I’m not good with code so would appreciate any insight.

Tags:

4

Answers


  1. 0

    Instead of font: Raleway !important; you should write font-family: Raleway !important;

    And make sure that font is available/loaded

    Login or Signup to reply.
  2. 0

    Based on the code sample you posted, try this:

    .page-numbers {font-family: Raleway;}
    Login or Signup to reply.
  3. 0

    In your pic 3 I saw that you are using Beaver Builder. In order to change the font family ONLY on the page numbers, you can use:

    .fl-builder-pagination .page-numbers { font-family: Raleway; }

    As Johannes already said, you have to make sure the font family is loaded!

    I just tested with the ui-monospace font and it works:

    .fl-builder-pagination .page-numbers {
    font-family: ui-monospace;
}
    Login or Signup to reply.
  4. 0

    If your font is came from external, you should @import it first. Then use it as your font-family.

    <style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');

.pagination li a {
font-family: 'Raleway', sans-serif;
}
</style>

    If your font is in your file/downloaded file, you should make an name for your font and use it.

    <style>
@font-face {
   font-family:'Myfont-Raleway';
   src: url('myfonts/Raleway.ttf')
}

.pagination li a {
font-family: 'Myfont-Raleway';
}
</style>

    use !important just to be sure it read the font.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search