Unique design and elements featuring the `width: auto` property for custom fonts

In my current project, I am utilizing the popular 'Open Sans' font family. However, I am encountering a specific issue.

The problem arises with buttons and other elements that have width: auto. Upon page load, these elements initially have their width calculated by the browser. Once the 'Open Sans' font is fetched from Google Fonts, their size is readjusted, resulting in an unpleasant visual effect.

You can see a live demonstration of this issue here: http://jsbin.com/IkifUhUL/1 (try refreshing the page multiple times to witness it).

I am curious if there is any workaround for this dilemma without having to specify a fixed width for these elements?

Any insights or advice would be greatly appreciated!

csswebfonts

Answer №1

If you're looking to delay the display of text until a specific font has loaded, consider using the Google Web Font loader API. You can find more information about it here: https://github.com/typekit/webfontloader

With this API, you can ensure that your text remains hidden until the desired font is fully loaded, and then unveil the text once the loading process is complete.

Here's an example configuration:

WebFontConfig = {
   loading: function() { // Add code for while waiting to load },
   fontactive: function(familyname, fvd) { // Add code for once loaded }
}

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

Is it possible to achieve Bootstrap 3-style for the mobile navbar menu in Bootstrap 4?

In the world of Bootstrap 4 https://i.sstatic.net/bMSOK.png Comparing to Bootstrap 3 https://i.sstatic.net/RVITm.png Seeking to replicate Bootstrap 3's menu in Bootstrap 4? This code snippet showcasing Bootstrap 4's menu can be found at : & ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Troubleshooting SCSS Issues in NextJS

Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is ...

cssdebuggingsassnext.js

What could be causing my website to automatically adjust the CSS height on its own?

My code looks like this: <li style = "height: 250px;"> <p>Foo</p></li> Despite my efforts, when I visit the website, the height doesn't seem to change. After inspecting the element in Chrome, I discovered that it's s ...

htmlcssheighthtml-lists

What is the best way to display these images correctly within a slider?

My goal is to display 4 images/company logos per slide, but they all end up clustered on one slide. Despite my efforts to adjust the CSS, nothing seems to work. This is what my code currently renders: Here are the react component codes I am using: To se ...

javascripthtmlcssreactjscodesandbox

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

javascripthtmlcssbootstrap-4

Completely shrink the middle row first when resizing the browser before shrinking the other rows

Utilizing a simple three row structure: <div class="EditorHeaderWrapper"> <h1>Title</h1> </div> <div class="EditorMainRowWrapper"> // Content of the main row goes here </div> <div class="EditorFooterWrapper"> ...

htmlcss

Stop the removal of the CSS content property

When a user enters and re-enters their password, I have a form that checks the strength of the password and displays text accordingly. However, I noticed that if a user makes a mistake and uses the backspace to re-enter the password, the text from data-tex ...

javascripthtmlcsscss-selectorspseudo-element

Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is re ...

cssangularjstwitter-bootstraptooltip

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

css

establish a distinct row color pattern for the initial column

I am currently working on a table that has sticky columns. I am trying to create alternating row colors in the first column only. Below is the code for the table: <div class="table-responsive"> <table class="table table-bordered table-stripe ...

cssbootstrap-4

When using font size in rem units, it will remain consistent across different screen sizes and not be subject to scaling

When setting padding, margin, and font size using rem units, I noticed that on larger screens the output looks good. However, on smaller screen devices, the sizes do not reduce proportionally - instead, the measurements from the larger screen persist. Wh ...

css

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider

React Native tutorial: Changing button color on press

When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it sho ...

javascriptcssreactjsreact-native

There seems to be an issue with the functionality of the Bootstrap Modal

I've been working on incorporating bootstrap login Modal functionality into my code, but for some reason, the screen is not displaying it. Here's what shows up on the screen: The red box in the image indicates where I am expecting my Login Modal ...

javascripthtmlcssbootstrap-4

What is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

javascripthtmlcssbootstrap-4

What is the process for creating a div and its children without inheriting the styles of its parent?

Imagine having the following structure: <div class="building"> <p>...</p> <div class="room"> <p>...</p> </div> </div> <div class="building"> <p>...</p> <div class="room ba ...

htmlcsstwitter-bootstrapresponsive-design

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

I am new to web design and have a unique approach; I believe in the importance of flexibility. It puzzles me why pixels (px) are commonly used instead of percentages, maybe my perspective is misunderstood. I've been on the hunt for a basic HTML layo ...

cssdomlayouthtml

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

javascripthtmlcsssticky

How can I prevent the content from being pushed when the sidebar is opened in JavaScript and CSS? I want to make it independent

I'm struggling with making the sidebar independent of the main content when it's opened. I've included the CSS and JavaScript code below. Can someone provide assistance with this? function ExpandDrawer() { const drawerContent = docu ...

javascripthtmlcsssidebar

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel