I am having trouble trying to import a woff2 font file for use in a simple test webpage.
Below is how I have organized and coded the test webpage:
Added .woff file
Everything is in one folder named 'test' and the #font-face src references the local .woff2 font file I want to test. Unfortunately, the font for the heading does not show the proper font unless I use the .ttf font file.
This is how it looks when I use the .ttf file:
and this is how it looks when I use the .woff2 file:
I feel as though I am making a simple formatting mistake somewhere, but I can't seem to figure out where I'm going wrong. Any help is appreciated.
I finally found out why the font wouldn't work! I had downloaded the Latin-Extended version of the font, which wouldn't display correctly. All I had to do was download the plain Latin version of the font and it worked as it should.
I thought to download the plain Latin version of the font after taking a look at this post by limonte: Font rendering in Chrome (woff2) - after load font family doesn't want to change.
.woff2
First Way - Steps:
Go to iis server and then "Sites"
Double click on website you want to add MIME type.
Right pan find and click on "MIME Types"
In right most pan, click on "Add"
Type in ".woff2" in "File name extensions:" and "application/font-woff2" in "MIME Type:"
Done. Refresh your website page, this should reflect now.
Second Way - Steps:
Add Below into the web.config.
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
Note: If already there then just add entry for woff2. Else add entire tag.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
hope this can help found it a while back when doing something similar(not taking credit for this as found it not wrote it)
I would however suggest trying woff instead of woff2 depending on your browser..
Related
I decided to use ubuntu font-family for my angular project.I overrided it succesfully.But when I refresh the page,page starts with default font then in miliseconds turning into my ubuntu font.I just want it start with ubuntu not something else.How can I remove that default font of the html.
my styles.css below
* {
font-family: 'Ubuntu';
}
how I defined my fonts.css under assets on the angular.json
"styles": [
"src/styles.css",
"src/assets/css/fonts.css",
],
what's under my fonts.css
#font-face {
font-family: 'Ubuntu';
font-display: swap;
font-style: normal;
font-weight: 300;
src: url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.eot');
/* IE9 Compat Modes */
src: local('Ubuntu Light'), local('Ubuntu-Light'), url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.svg#Ubuntu') format('svg');
/* Legacy iOS */
}
Screenshot from my console to show you how its overwritten
When you use a custom font from a file (using #font-face), the browser has to download that font before it can use it (unless the font already exists on the user's machine). While still in the process of fetching the custom font, most browsers will render all affected text in a fallback font. This brief moment is what is known as "Flash of Unstyled Text" (FOUT).
While there is no guaranteed way to prevent the FOUT, there are ways to improve the situation. I'll outline two.
Pre-loading fonts
Add this to the <head> of your page, before the inclusion of your CSS:
<link rel="preload" href="../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.eot" as="font">
This let's the browser know that you would like to preload the font with high priority, so that it's available as soon as possible. More details can be found in this Google article.
Using font-display
Change your font-display rule to block:
font-display: block;
This tells the browser to display no text until the custom font has been loaded. More details can be found in the same article
when someone uses the custom fonts it is normal behavior of the browsers/OS to display the normal font first and once the loading or downloading of the custom font is done then show that particular font on the page. This is known as FOUT.
Read about this here
Web Font flickering on load
UPDATED: You are already using font-face. Hence, removing the suggestion.
Thanks
Please put fonts.css code in a reboot.scss file or remove font-family: sans-serif; in reboot.scss file.
It's loading issue your reboot.scss file load first after your fonts.css load that is the main problem.
It depends on the size of the font-face that you are using. Until your desired font loads, the browser tries to display the default set font-face. You can try to install that font in your system and change your default browser font from settings.
I am dealing with a strange issue here.. It seems that Microsoft Edge browser doesn't load fonts when I use #font-face. I checked all my computers that run Windows 10 & Microsoft Edge.
I checked http://caniuse.com/#search=font%20face
It says that font-face is compatible with Edge so I don't know what's going on.
In my example I just have a div and its font parameter.
CSS
#font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
#font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
HTML
div {
font-family:'Dosis';
}
Live version
http://codepen.io/mariomez/pen/YwGGWy
You are using only WOFF2 format which has no support on Microsoft Edge.
WOFF2 Compatibility
To solve the problem include WOFF format in your #font-face declaration. Most of the modern browser supports WOFF
For maximum browser support include all possible format.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
I just found that if you have the google font installed locally (eg if you've been doing a mockup), edge will not display the web font version. I did a lot of reading round to find the root of the issue and did not see anyone mention this.
hope this helps someone else :)
Procedure:
The procedure I followed in order to install all necessary formats was to find which font-weight I needed from each font and then go and download it from Google Fonts. Then using the https://everythingfonts.com/font-face (font face generator) I downloaded all the formats along with the CSS code. Then I incorporated them all into my CSS and HTML.
CSS:
#font-face {
font-family: 'JosefinSansLight';
src: url('/fonts/JosefinSansLight.eot');
src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
url('/fonts/JosefinSansLight.woff2') format('woff2'),
url('/fonts/JosefinSansLight.woff') format('woff'),
url('/fonts/JosefinSansLight.ttf') format('truetype');
}
HTML (excerpt):
.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}
Files: (my domain folder)/fonts
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf
Things have changed for Microsoft Edge regarding .woff fonts. I recently purchased a Windows 10 laptop. The websites that had .woff fonts in #font-face did not display them in Microsoft Edge but did display them in Internet Explorer. The Microsoft developer website as of 5/11/2016 says that .woff2 is supported in Edge as follows.
Microsoft Edge supports the Web Open Font Format (WOFF) File Format 2.0 specification which provides an improved compression algorithm from WOFF 1.0. The font format "woff2" is supported.
Here is an example of the CSS code I implemented in all of my websites to successfully display my special fonts using Microsoft Edge based on the link above.
#font-face {
font-family: Eurostile;
src: url("http://mylink/eurostile.woff"), url("http://mylink/eurostile.woff2"), url("http://mylink/eurostile.eot"), url("http://mylink/eurostile.ttf") format('truetype');
}
Trying to find a way to get better antialiased rendering of fontawesome icons in chrome in windows i found that using 'otf' format solve the problem.
i used in fontawesome.css:
src: url('../font/fontawesome.otf?v=3.1.0') format('opentype'),
url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
rendering is very good in chrome with a minor issue "in some icons the very top of the icon is cropped", other browsers render the icons clearly without any issue.
my question, why otf version is not used in fontawesome to fix chrome bad rendering issue, the otf file is already present but not included in css?
Have you tried this?
I have a problem with icons getting cut off at the top but loading the otf file doesn't fix it.
As chrome can also load svg fonts then the opentype will be downloaded and then overridden with an extra http request for the svg.
So it seems like you are downloading extra data and ending up with the same result?
I m using one of the Font for my website i.e. "Aparajita". Which is not required to be available in every system through which my site is getting accessed.
My problem is it look's different when this font is installed on the browsing PC and some horrible when the same font is not getting installed.
How should i resolve this issue.
Should i install "Aparajita" Font on my hosting Server or what else...
Thanks in advance..
Make sure you have legal rights to the font.
Make the font available on your web server (i.e. put it in a directory from which it can be served in response to an HTTP request, the same way you would an image or stylesheet).
Reference it in your CSS using #font-face.
See: https://developer.mozilla.org/en-US/docs/CSS/#font-face
Font Squirrel has many free fonts and font-related tools. Google Fonts abstracts the whole process is makes it quite easy.
Now that you (hopefully) know what terms to search for, you can find many examples on SO of using custom fonts.
You can use CSS3 #font-face property for use custom font in your website and with the help of this your font will look same on all computers wheather they have insallted that font or not....
You can write like this :-
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Or Read More About how to use custom fonts for our websites.....
<font face="Your font_family">
Here it is for font style.
<FONT SIZE=7 COLOR=RED>word</FONT></U></B>
In my site i am using specific font with this code:
#font-face {
font-family: 'monotype';
src: url('/static_frontend/monotype.eot'); /* IE9 Compat Modes */
src: url('/static_frontend/monotype.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/static_frontend/monotype.woff') format('woff'), /* Modern Browsers */
url('/static_frontend/monotype.ttf') format('truetype'); /* Safari, Android, iOS */
}
When I open the site with www. the font not loads in firefox. In every other browsers everything is fine. In firefox font works only without www.
If anyone has encountered a similar problem please write.
Thanks in advance!
Consider using Google Fonts. If that's not viable enough for you, I encountered a similar issue a while back. It happened because the fonts were on a separate domain or subdomain than the original files.
Found the reason to be for this was because base URL was always set to without www. and the other style sheet was linked without www. as well, made path relative and it works just fine!