Safari displaying elements without following font styling specified in CSS

I have a select element in my web page, and I've customized the font using CSS:

    @font-face {
        font-family: myFont;
        src: url('myFont.woff');
    }

    body select{
      font-family: myFont;  
    }

After testing in Chrome, Firefox, and IE, the font displays correctly. However, in Safari version 9.0.2, the font is lost when the select element is clicked.

I used WhatFont to inspect it, and the results were as follows:

https://i.sstatic.net/bSe5g.png

It seems like the font -apple-system - regular is replacing my custom font.

Is this a common issue in Safari?

Is there a solution to this problem?

htmlcssfontssafari

Answer №1

Give this a try and hopefully it will work.

<style>
@font-face {

font-family: 'BebasNeueRegular';

src: url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.eot?') format('eot'),

url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.woff') format('woff'),

url('https://cdn.css-tricks.com/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.ttf') format('truetype'),

url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');

font-weight: normal;

font-style: normal;

}
</style>

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 function you are trying to use is not a valid jQuery function

Although I've come across this issue in previous posts, none of the solutions worked for me and it's really frustrating. I'm a newbie to javascript and I'm sure the answer is probably simple. I'm attempting to incorporate the rapt ...

javascriptjqueryhtmlfunction

Choose various files (from various directories) using a single input type file element

Is it possible to select multiple files from different directories for the same input file type element using only HTML? I am aware of the multiple attribute, but it seems to only allow selecting several files at a time in the same directory within the b ...

html

`Arranging Widget Boxes in a Vertical Layout`

I am currently displaying each record with two boxes for Afternoon and Night horizontally: https://i.stack.imgur.com/JMKug.png This is the code structure I am using to achieve this layout: <div id="record_box"> <div class="row" style="paddi ...

htmlcsstwitter-bootstrapinspinia

Exploring AngularJS: A Guide to Accessing Millisecond Time

Is there a way to add milliseconds in Time using AngularJS and its "Interval" option with 2 digits? Below is the code snippet, can someone guide me on how to achieve this? AngularJs Code var app = angular.module('myApp', []); app.controller(&ap ...

javascripthtmlcssangularjs

Unable to display <div> elements from CSS within the Wordpress Text Widget

Having trouble displaying a <div> from CSS in a Text Widget on Wordpress. <div class=”deffgall-cutlure” ></div> style.css .deffgall-cutlure { display:block; position:relative; width:100px; height:100px; backgrou ...

csswordpress

The alignment of a background image in CSS is different from using margin:0 auto, especially when dealing with scrollbars

Check out the following link to view the issue: http://jsfiddle.net/7zb6P/1/ In a scrolling div, both the yellow box and the background image are centered, however their centers appear slightly different. The discrepancy seems to be because the background ...

htmlcss

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

javascripthtmlcssreactjsmaterial-ui

When additional elements follow, the button ceases to function properly in JavaScript

I am working on creating a text-based idle game that involves multiple buttons and text around them. However, I have encountered an issue where the functionality stops working when I try to add text after the "Work" button. The callback function is no lon ...

javascripthtmlbutton

Why is my navbar not functioning properly with Bootstrap 5 and HTML?

My navigation bar suddenly stopped working and now my background image, text on the background image, and navigation have all turned white after I added links to different hrefs. I'm also using bootstrap 5. The only thing I can see is from my id citat ...

htmlbootstrap-5

CSS Word Breaker: Shattering Text into Pieces

Is there a way to prevent long words in the <p> tag from breaking awkwardly in the browser? I attempted to use the CSS property word-break: break-all;, but it seems that Firefox and Opera do not support this feature. Additionally, normal words are al ...

htmlcssword-break

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Check out this link for testing: http://jsfiddle.net/EnJSM/ You might observe that by removing "color: #6CB5FF;", the transition behaves differently - it only works for the second part of the line. I'm interested to see what solution you come up wit ...

javascripthtmlcssmootools

When adjusting window size, the input shifts towards the left

Is there a way to prevent my input and login button from moving to the left when resizing the window? I am new to HTML and CSS and would appreciate any tips on keeping them in place. Below is my CSS code: #absolute { position: absolute; top: 411px; le ...

htmlcssresize

What is the best method to remove the gap between my two horizontal div elements?

Is there a way to eliminate the small space between my two horizontal sections here? I've already attempted using margin: 0px; and padding: 0px; on the container, but it doesn't seem to be effective. Any assistance would be greatly appreciated! ...

htmlcss

Send a bundle of data through AJAX requests

An issue has been encountered on an HTML/PHP page named sucessful.php where a variable job_id passed from another page is not being received by the destination page interview.php. The problem arises when attempting to transfer two variables and their corr ...

javascriptphphtmlajax

Troubleshooting media queries on an example webpage

Hey there! So, I'm having a bit of trouble with running media queries on a simple HTML page. It's been a while since I worked on this stuff, and I feel like I must be doing something silly that I can't quite pinpoint. If you want to take a ...

htmlresponsive-designmedia-queriesliquid-layout

Steps for using selenium to select a radio button

Looking to leverage Selenium in Python 3.9 for button clicking automation. Link to the website https://i.stack.imgur.com/KWsKG.png The goal is to click on "Effective Date", then select "July 2021", and finally click "OK". Initially, the first two steps ...

pythoncssseleniumselenium-webdriverxpath

If the MacBook is locked, Jenkins-initiated Selenium Safari tests will be unable to run on the device

After ensuring that the settings in system preferences prevent the mac from sleeping, Jenkins initiates a scheduled test. The browser opens but the test fails due to a blank page. If the mac is unlocked or the screensaver is not active, the same test runs ...

seleniumsafarilocked

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5

Incorporate 'Additional features' into the Navbar when adjusting window size

When the window is resized, I want to display a collapsed 'More options' button that will collapse all hidden <li> elements. Here is an example: <li id="menu_more_container" class="dropdown" style="display: none; ...

javascripthtmljquerytwitter-bootstrapnavbar

Is it possible to utilize v-html with message data in Vue without any limitations on the <title> element?

Currently utilizing Vue.js 2 and my SDK is IntelliJ: I am attempting to bring HTML content into a Vue.js file. The main objective is to include the <title></title> attribute, as it seems that Vue doesn't have direct support for this feat ...

javascripthtmlcssvue.jsaccessibility