PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, February 17, 2022

[FIXED] @Font-face not working on IOS

 February 17, 2022     css, font-face, ios, wordpress     No comments   

Issue

So I am working on a WordPress website and on each page I have an H1 tag for the title of that page. I am using a special font using @font-face and it works great on windows in every browser, but when I switch over to a mac it won't display the h1 tag its just white space. I have tested this in safari and chrome on multiple mac's and its not working on any of them. If I change the font to let say Arial it works great, if I setup to have a fall back font it does not work. If I change the h1,h2,h3 tags to use NorthBergen-Light it works great, its just the NorthBergen that doesn't work and the code for both of them is the exact same. In my research I have found that some people say they have had success when they remove all of the quotes but when I do that it just breaks everything. I can't figure out why NorthBergen-Light works great but NorthBergen does not.

        @font-face {

            font-family: 'NorthBergen';

            font-style: normal;

            src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');

            src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');

        }

                @font-face {

            font-family: 'NorthBergen-Light';

            font-style: normal;

            src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');

            src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');

        }

                    .services .services-inside .services-title{

                font-family: 'NorthBergen' !important;

            }

                    h1, h2, h3{

                font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;

            }

                    footer.main-footer .widget .widget-title{

                font-family: 'NorthBergen-Light' !important;

            }

                    h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{

                font-family: 'NorthBergen-Light' !important;

            }

So I got it to work by using fontsquirrel and taking all the files and putting them in my FTP and changing the css file to look like.

@font-face {

            font-family: 'NorthBergen';
            font-style: normal;

            src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
            src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
             url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
             url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
             url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
             url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');

        }

Solution

Dont know anything about Wordpress, but you might need some conversion of font for all browsers:

@font-face {
font-family: 'Min_font';
    src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
    src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8  */
         url('../fonts/Min_font/Min_font.woff') format('woff'),  /* Newer browsers */
         url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini  */
         url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}

Try fontsquirrel: http://www.fontsquirrel.com/tools/webfont-generator



Answered By - jan199674
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing