Update the font in the pagination links

I'm attempting to modify the font of the pagination on my website.

View image 1

Despite using a website builder, I couldn't find the option to change the font, so I resorted to inspecting the code to locate the correct class or id in order to use CSS instead.

This is the code I am trying:

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

Unfortunately, the font is not updating. When I hover over the element, I see the following: View image 2 View image 3

What adjustments do I need to make to make this work? I struggle with coding, so any guidance would be greatly appreciated.

css

Answer №1

It is recommended to use font-family: Raleway !important; instead of font: Raleway !important;

Additionally, confirm that the specified font is accessible and loaded correctly

Answer №2

If you're using the code snippet you shared, you can experiment with this suggestion:

.page-numbers {font-family: Raleway;}

Answer №3

Upon reviewing your third image, it appears that you are utilizing Beaver Builder. If you wish to change the font family specifically on the page numbers, consider implementing this CSS:

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

Just like Johannes mentioned, ensure that the desired font family is properly loaded!

I conducted a test using the ui-monospace font and successfully changed the font:

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

Answer №4

When incorporating an external font into your project, start by using the @import rule to bring it in. Then, set it as your chosen 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 you have the font stored locally or downloaded, define a name for the font and use it accordingly.

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

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

For added assurance, consider using !important to ensure the font is being applied correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background refuses to cooperate, soaring upward only to be abruptly sliced in two

I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...

htmlcssbackgroundbackground-image

I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

When attempting to include an h3 element on the website, it remains stuck at the top. I have tried using CSS properties like position, top, and left but it does not respond to them. Additionally, I experimented with a gallery template from w3schools to see ...

htmlcss

I'm currently utilizing the react mui package, specifically @mui/x-date-pickers. Could someone kindly provide guidance on how to customize the color of the

I am currently working with MUI in React and using the DatePicker component from the @mui/x-date-pickers library. The version I am using is 6.0.3. I have encountered an issue where, upon selecting the first day, the specified color changes as shown in the ...

cssreactjsmaterial-uidatepicker

Reduce / condense text that is overflowing

Take a look at the image I've attached. The text is overflowing outside the div, and I want to collapse it with a "Read more" link at the end. Users should be able to click on the "Read more" link to expand the text. I'm currently working on a p ...

javahtmlcsswebmern

What is the process for logging in using a Bootstrap modal?

I am currently working on creating a login feature using a bootstrap modal, but unfortunately, I am facing some issues with it. If anyone is willing to offer their assistance, I would greatly appreciate it. My knowledge of JavaScript and Bootstrap is limi ...

javascriptcssbootstrap-modal

Trouble arises when attempting to append a class through ng-class upon clicking

In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...

javascriptcssangularjs

Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

I am seeking a solution to change the background color of multiple div boxes with the class name "flex-items" using JavaScript. Below is my current code: function changeColor(){ document.getElementsByClassName("flex-items").style.backgroundColor = "bl ...

javascripthtmlcss

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

cssmysqli

Using CSS3, you can apply multiple backgrounds to an unordered list with one set

Currently, I am in the process of working on a unique Wordpress template. One of the challenges I am facing is figuring out how to incorporate three background images for each <li> element in the dynamically generated navigation menu. Here are two ex ...

htmlcsswordpresshtml-listsbackground-image

What is the best time to fetch the height of an element containing an image?

I am working on my web app and I want to implement a popup element that contains an <img> element. Typically, the image source is larger than necessary, so I resize it using CSS. However, before displaying the popup, I need to determine its outerHeig ...

javascriptjqueryhtmlcssimagesloaded

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

Why isn't the footer extending to the edges despite setting margins and other properties?

Feeling a bit lost here. My footer isn't extending to the edges of the window like it should, or so I thought. .footer { height: 200px; bottom: 0px; margin: 0px; left: 0px; right: 0px; padding: 0px; width: 100%; background-color: #E ...

htmlcss

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...

javascripthtmlcssajax

Assistance required for JavaScript with Image and Hyperlinks

In the provided code snippet, I have included a javascript onclick function to the image tag. After clicking the image and then going back, the page remains on the current page rather than returning to the original page. Is there a way to prevent this beha ...

javascripthtmlcss

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

htmlcsscross-browserinternet-explorer-9css-selectors

Consistent sizing for Bootstrap thumbnail images

In my current project, I am implementing a Bootstrap thumbnail feature where each thumbnail consists of an image and a heading. However, a problem arose as the images do not have the same size, resulting in thumbnails with varying dimensions. To resolve th ...

jqueryhtmlcssangularjstwitter-bootstrap

Tips for rearranging sibling divs while maintaining the order of their child elements

Is there a way to shuffle the order of div classes shuffledv, while maintaining the same order of id's each time the page is refreshed? <div class="shuffledv"> <div id="2"></div> <div id="3"></div> <div id="1">< ...

javascriptjqueryhtmlcss

Populate the content of the child DIV to match the grid layout as a whole

I am attempting to control the layout of the grid on my website using CSS. By utilizing Bootstrap 4, I have created two divs with equal height using display:grid. However, I am facing difficulties in managing the child elements within these divs. I am tryi ...

htmlcssbootstrap-4

What could be causing the CSS not to load on my WordPress website?

In an effort to improve my page speed score, I decided to install several plugins. Unfortunately, after installing w3 total cache, my website stopped loading CSS properly. Check out this image of the website ...

htmlcsswordpressplugins

Organizing items in rows with alternating quantities using CSS within a fluid design

Encountering a peculiar issue while attempting to organize items spread across multiple rows, with each row having either 5 or 4 items (alternating between 5 and 4 items per row). However, when the screen width reaches 480px, the layout automatically switc ...

htmlcssresponsive-designcss-float