What happens when an SVG image defaults to Times New Roman on a smartphone?

I have a unique SVG image featured on my website. Currently, I do not possess an SSL certificate, so you may encounter a security error before accessing the content. The font I originally utilized in creating this image was Segoe UI. Interestingly, while it displays correctly on my desktop, when viewed on a mobile device, it defaults to Times New Roman. To address this issue, I attempted the following workaround without success:

@media (max-width: 576px) {

 #heroimg {
    font-family: Arial, sans-serif;
 }

}

My reasoning behind incorporating this code into my CSS file was to provide an alternative font option in case the primary font could not be loaded successfully.

csssvgfontsresponsiveness

Answer №1

Ensure that you convert all text to outlines prior to uploading the SVG file.

Achieve this by using Adobe Illustrator and selecting the text, then navigating to Type > Create Outlines

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

Height-based responsive navigation bar

I recently implemented a menu on my responsive website that appears when the viewport is 714px width or less. Upon clicking the button, a side-sliding menu emerges across the page. However, I'm facing an issue with setting the menu height to match th ...

javascriptjqueryhtmlcss

Creating a seamless integration of images and backgrounds using CSS

Can you help me find a way to blend the image with the background to eliminate the visible separation between them? Here is the link to the image: https://i.stack.imgur.com/VB9in.jpg ...

htmlcss

Displaying a project in the same location using jQuery

Struggling with jQuery and positioning hidden items that need to be shown? I have two white boxes - the left one is the Client Box (with different names) and the right one is the Project Box (with different projects). My goal is to show the projects of a c ...

javascriptjqueryhtmlcssposition

Unique style CSS (Flex)Grid with spacing and uniform aspect ratio

Hello everyone, typically I'm quite skilled when it comes to CSS but this particular challenge has pushed me to my limits. I have a desire to create a grid where all elements maintain the same aspect ratio (with images that already share this aspect ...

cssflexboxcss-gridaspect-ratio

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground

Tips on styling the initial word with CSS

Is it possible to change the color of the first word within a div tag using CSS? <div class="head-logo"> <? echo $siteName ?> </div> CSS .head-logo{ text-align:center; color:#000000; font:normal 22px Tahoma; marg ...

phphtmlcss

I need some guidance on how to create this using CSS, or what keyword should I use to find a similar solution

My client's website requires this specific design, but I am struggling to find a similar CSS format online. Can you provide assistance in creating this layout? Attached is an image for reference: https://i.sstatic.net/gJua4.png ...

css

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed. <button id="showButton" type="button">Show More</button> <div id="container"> <div id="fourthArticle"> <i ...

javascriptjqueryhtmlcss

Appearing text dialogue

Can you tell me the name of the box that appears on top of a webpage? A couple of examples include: Facebook photos - It dims the background webpage and opens a separate pop-up to display pictures. Advertisements - The box that typically requires clickin ...

htmlcsspopup

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

Unlocking the potential of Bootstrap 4 pop ups and modals within an Angular 6 project

Angular.json "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], ...

cssangularmodelbootstrap-4mean-stack

How can you vertically center text without using table-cell and line-height?

I have a webpage at this link and I am trying to vertically align the text. Using table-cell causes all items to display in the same row, which is not what I want as shown in the image at this link. Setting a fixed line-height won't work either since ...

htmlcssbootstrap-4vertical-alignment

Instructions on toggling button visibility based on dropdown selection?

My goal is to have a button hidden by default, and when I select an option from a dropdown list, the button should appear. Check out the code on JSFIDDLE $(function() { $('#cashbill').change(function() { $('#bill_icon').hide() ...

javascriptjqueryhtmlcssbootstrap-4

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Choosing the *exact* element with jQuery

As a newcomer to jQuery, I'm attempting to apply a specific class to an individual image when hovering over a button. However, my initial approach did not yield the desired result. The issue is that there are multiple .service sections, each containi ...

javascriptjquerycsshtml

Variety of HTML tags yet identical ID

Is it possible to have two elements with different types – such as a div and an ul with the same id in HTML? Here is an example of HTML code: <div id="articleOptions"> <ul id="articleOptions"> <li>Share</li> ...

htmlcss

What is the best way to use jQuery to toggle the visibility of a background?

Check out my CSS below: #load-icon { background: url(/Images/loaders/mask-loader.gif); background-repeat: no-repeat; z-index: 99; width: 32px; height: 32px; z-index: 99; margin-top: 9px; margin-bottom: 9px; margin-right: 5px; ...

jqueryhtmlcss

How to change the image source using jQuery when hovering over a div and set its class to active?

I am working with a div structure that looks like this: <div class="row margin-bottom-20"> <div class="col-md-3 service-box-v1" id="div1"> <div><a href="#"><img src="path" id="img1" /></a></div> ...

javascriptjqueryhtmlcss

Exploring the Spacing Between ng-repeat Items in Angular

Encountering an issue with multiple ng-repeat elements displaying div elements as inline-block. A strange gap appears between the elements when transitioning from one ng-repeat to the next, which is visible in the provided image: A demonstration of this p ...

javascripthtmlcssangularjs

What is the best way to automatically populate the date and time fields in PHP MySQL without manual input?

Is there a way to automatically populate these two input fields without any manual input? <input type="time" name="Time" id="Time" value="" /> I am looking for a solution to automatically fill the date and ti ...

javascriptphphtmlcssmysql