The Kadwa font's right arrow character appears overly broad

I am having an issue with the Google Font Kadwa in InDesign, specifically when using it to generate a right arrow (→).

After loading the font onto my website, I noticed that the arrow appears to be too wide for my liking.

@import url('https://fonts.googleapis.com/css?family=Kadwa');

body {
  font-family: 'Kadwa';
}
Although the font is correctly applied, the arrow looks too wide →

Interestingly, when I view the arrow on the Google Font page, it is rendered correctly.

Confused and seeking help to understand what I might be doing wrong. Would greatly appreciate any solutions or suggestions.

csswebfontstypographygoogle-fonts

Answer №1

Seems like the character is not loading properly with the font for some unknown reason. You can actually make Google fonts load a specific character or group of characters by adding a text parameter in the request. (Remember to url encode the characters.)

To fix this issue, I have included an extra font request below that loads a font containing only the arrow character. This complements the loaded Kadwa font, ensuring everything displays correctly.

In addition, I have transformed the arrow character into an HTML entity (→).

@import url('https://fonts.googleapis.com/css?family=Kadwa');
@import url('https://fonts.googleapis.com/css?family=Kadwa&text=%E2%86%92');

body {
  font-family: "Kadwa";
}
This should display the arrow 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

What is the best way to enable a css class for an image in Sitecore Field Renderer?

I am working with Sitecore (7) & MVC and need guidance on how to include a css class attribute for an image using a field renderer in Sitecore. Here is the HTML structure without Sitecore: <div class="background-container"> <img src="/images/ ...

cssasp.net-mvcsitecoresitecore7sitecore-mvc

Display the PrimeFaces dialog in the middle of the screen

I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

cssuser-interfacedialogdatatableprimefaces

Utilizing the @page CSS rule in Vue.js: A step-by-step guide

I am facing an issue with printing a specific page in landscape mode. Here is the code snippet I have been using: @page { margin: 0; size: A4 landscape; } The problem is that this style rule affects all pages in my application because all style se ...

cssvue.jsvue-component

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

.red p { color: red; } .blue p { color: blue; } <div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div> </div> Initially, I expected the first paragraph to be bl ...

htmlcss

Is it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

htmlcss

Customizing Your Keyboard Design with CSS

I need assistance in creating a compact and dynamic keyboard layout with characters only, but I have hit a roadblock. Here is the link to my current progress: http://jsfiddle.net/45zDd The design is almost complete, however, the second and third rows req ...

htmlcss

Special Table Spacing

Within my table, I am looking to create spacing between cells without setting padding and/or margin on each individual td. While using the CellSpacing and/or CellPadding properties of the table could be a potential solution, these properties apply space on ...

htmlcsshtml-table

"Utilizing the owl carousel to dynamically adjust the height of various images and fill

Currently, I am using the latest version of the owl carousel and encountering a small issue. The problem lies in the fact that I have 3 images with varying sizes. The main div, labeled as "mydiv," is required to have a width of 614px. However, upon closer ...

htmlcss

How can I ensure that the height of my dropdown menu covers the entire screen without being limited by the page height

I'm trying to adjust a dropdown menu so that it fits perfectly within the screen size, covering the entire height without showing any content beneath or below it. Currently, the menu covers the screen on some pages but scrolls and appears too large du ...

javascripthtmlcss

Having an issue with the 'scroll' event not being disabled in jQuery

Currently, we are encountering an issue with the implementation of a simple hiding menu when scrolling and showing it back once the user stops scrolling. The method .on('scroll') works as expected, but .off('scroll') is not functioning ...

javascriptjqueryhtmlcss

Tips for implementing a checkbox (with tick/untick functionality) as a replacement for a plus/minus toggle using HTML

Is it possible to use checkboxes instead of plus and minus signs for expanding and collapsing sections? Can the plus and minus symbols be incorporated into the checkbox itself, so that clicking on the checkbox toggles between plus and minus states? Any hel ...

javascripthtmlcssreactjsbootstrap-4

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

htmlcssbootstrap-5

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

Looking to align a Pinterest board to the right side of the page

Attempting to align a Pinterest board to float right is proving more challenging than expected. Any styling modifications applied to the span or Pinterest board result in rendering issues. A task that was supposed to take only 2 minutes has now become fr ...

csscss-floatstylingpinterest

Elements overlapping within div elements

Div container and p element are overlapping another Div that contains an image. The image needs to respond to a :hover CSS event but only a small portion of that Div container is able to sense the mouse hovering over it. Any suggestions on how to solve t ...

htmlcss

Updating the navigation with a dynamic CSS class using jQuery

Hey there, I'm on the lookout for a simple and discreet method to dynamically add an "active" class to a navigation menu based on the current directory. Unfortunately, I am unable to modify the body tag with a custom class, ruling out a pure CSS solut ...

jquerycss

jQuery - accessing a different class within the object

Let me explain the scenario: I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance, <div><p> Physics </p></div> <div><p> Chem ...

javascriptjqueryhtmlcss

Are you curious about how jQuery can be used to group buttons together?

In my ASP.NET MVC application, I incorporate JQUERY to enhance the user experience. I am curious if there is a way to group buttons together, not radio buttons but regular buttons. Can I have buttonA + buttonB + buttonC grouped together with some space i ...

jquerycss

Using a CSS nth-child selector to eliminate the bottom margin of the final row

As I work on creating lists that are displayed in columns of two, each .customer-review-container includes a margin-bottom CSS property like this: <div class="col-md-6"> <div class="customer-review-container"> </div> <!-- en ...

htmlcssmargincss-selectors

Difficulty in placing the logo within the navigation menu

Currently working on developing a website and encountering challenges with positioning the logo within the navigation bar. A test version of the site can be found at The logo is not centered properly in its designated space, especially in smaller browser ...

htmlcssnavbar