How Do I Implement font-face So the Embedded Fonts Display with URLs starting with www in Windows 10?

Question!

I have attempted two different implementations of @font-face. The first one is below.

@font-face {font-family: ISL_Jupiter;
  src: url("http://4d3dpuzzles.com/jupiter.woff"), url("http://4d3dpuzzles.com/jupiter.woff2"), url("http://4d3dpuzzles.com/jupiter.eot"), url("http://4d3dpuzzles.com/jupiter.ttf") format('truetype');
}

The second one is using generated statements from the Online Web Fonts website.

@import url(http://db.onlinewebfonts.com/c/e9de18b32b456d7a7d03814ffa458b50?family=ISL_Jupiter);

@font-face {font-family: ISL_Jupiter;
    src: url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.eot");
    src: url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.eot?#iefix") format("embedded-opentype"),
    url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.woff2") format("woff2"),
    url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.woff") format("woff"),
    url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.ttf") format("truetype"),
    url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.svg#ISL_Jupiter") format("svg");
}

Both implementations display the embedded fonts properly on Safari, Firefox, Chrome and Opera (Mac) with URLs starting with www and those that don't. When I display my websites on my Windows laptop using IE, Edge and Firefox they only appear when the link doesn't start with www. If they start with www the Times New Roman font displays. For some reason when I try accessing my website without www on Chrome it automatically adds www so I don't know if the embedded fonts are working without www.

Note: This is my first time using a Windows computer in ten years. That one ran XP so I need help with Windows specific software and configuration changes.

I've seen some questions regarding font-face not working at all with www and suggesting that people should make changes in Apache to redirect the alias to the one they want to use. In my case I would redirect all the pages of www.example.com to example.com. However I only have this problem on Windows computers. I don't want to run into a problem with too many redirects. I currently have the following in my vhosts file for all of my websites.

<VirtualHost *:80>
    ServerName example.com
    ServerAlias www.example.com
    .......
</VirtualHost>

How do I get my @font-face statements to work in Windows with URLs starting with www? Is this possible?



Answers

Since I did not get an answer for this using font-face or Apache I will move on. I will make sure that all of our materials mention the URL without the www and leave it at that.



I decided to revisit this issue since I started having problems with using @font-face with subdomains because of recent browser security implementations. I really did not want to mess with Apache if at all possible but decided to try again using variations of what's in this blog post for using cross domain fonts.

https://zinoui.com/blog/cross-domain-fonts

Attempt 1

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff
AddType application/font-woff2           .woff2



This video can help you solving your question :)
By: admin