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.
Related
I'm using a font called "DejaVu Sans" that does not exist in google fonts
body{
font-family:'DejaVu Sans' , tahoma;
}
I uploaded the font with different extensions to my website but it takes time to execute on the text on my website, I think it waits for the whole website to load first.
Is it better to upload the font files to a CDN or a files cloud and then use it on my website, or there is a better way?
you should use font face 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.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 */
}
then you can use the font wherever you want
The font load time depends on the font file size. You can use font face kit provided by font-squirrel : https://www.fontsquirrel.com/fonts/dejavu-sans
To improve loading time you can wisely choose the required font formats to bind with your website font face.
To get more information about loading time you can refer below link, which will helps a lot.
https://www.smashingmagazine.com/2011/03/the-font-face-rule-revisited-and-useful-tricks/
use #font-face instead.
Upload your .ttf files and convert them to .woff, .woof2 etc that is needed for font face.
Here is the link for standard #font-face example :
#font-face
Use online converter here: webfont converter
I've been working for a client site and I have problem with rendering of Roboto font.
In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same.
Here is the example:
Left is Mozilla Firefox, right is Chrome
http://i.stack.imgur.com/dX4Lx.jpg
Do you have any idea what's wrong with it?
thank you
Well, it's such a shame, but I have had old version of Roboto installed on my PC.
Since I deleted, everything works fine again.
I should facepalm myself hard..
I have the same version and it's work.
Try to include font in CSS with this code
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
And set the font-weight: 300; for exemple and see if that works.
If you are using Adobe's Creative Cloud and you have Roboto set as a font, you may run into issues where all things in Chrome then get Roboto Bold. I disabled the font from Adobe Fonts and it fixed my issue, but in some Google products like GMAIL, Sans Serif is bolded and you can't turn off the bold. I don't know why and I can't find any good information on how to resolve that.
If you use #fontface evert browser use different font format so the complete css is 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.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 */
}
But as suggested using google fonts you should have no problems.
I had a similar issue. I noticed that all periods are square, not circle. Download a fresh copy of Roboto font here and reinstall it on your machine.
I had the same issue, for me what worked was calibrating my monitors and:
Go to chrome://flags/
Accelerated 2D canvas -> Enable
2D canvas -> Enable Reboot Chrome.
In my case, for a Hebrew site, the font-weight was set to 900 and the output was showing differently in Firefox and Chrome browsers even though I followed Google-Font's embedding rules properly:
//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
Solution:
I have just updated the font-weight to 700 instead of 900 and this fixed the issue.
https://stackoverflow.com/a/27383566/11417534 fixed this problem for me.
Just delete the protocol declaration (http:// or https://) from the font request.
I installed a moodle font (Coptic) in my Moodle Course and Theme and it displays correctly in Google Chrome. However when I try to view it in Firefox, I.E. or on my Tablet (Chrome via Nexus 9) it doesn't display the correct characters.
I followed these instructions before https://docs.moodle.org/28/en/How_to_add_custom_fonts_in_a_theme. The only thing is, before I only had Coptic.tff and no other font types. I.e. eot or svg. I then went online to get the other fonts. I.e. I uploaded Coptic.tff and got a zip of the other files. By including these other fonts in the dir. do you think it might fix the problem. Thanks for all you help. :-)
Please include all fonts type like you did. Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory.
eg: moodle/theme/yourtheme/fonts/
Some times " src: url([[font:theme|fontname.eot]]); ", this may not work.
Please add path like this
#font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'fontname';
src: url('../theme/your-theme-name/fonts/fontname.woff');
src: url('../theme/your-theme-name/fonts/fontname.eot') format('embedded-opentype'),
url('../theme/your-theme-name/fonts/fontname.woff') format('woff'),
url('../theme/your-theme-name/fonts/fontname.ttf') format('truetype'),
url('../theme/your-theme-name/fonts/fontname.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}
try !!! It will work for you :)
I found this answer here regarding graphic design:
https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This is exactly what my fonts are doing, but I'm trying to find out if there's a way to prevent this using html or css or anything web-based.
I'm using "platin" as my font. Do I just need to find a different font?
Any other thoughts on the topic?
If this is caused by using web fonts, I found this SO post (and the accepted answer) helpful: Google webfonts render choppy in Chrome on Windows
My solution was to use the Webfont Generator tool (http://www.fontsquirrel.com/tools/webfont-generator) to convert my font into the variety of web formats and copy their provided CSS into my stylesheet. I was using the Fauna One font from Google, so I had to download it from Google and then upload it into FontSquirrel.
The key is to put the SVG line above TTF, so that Chrome uses it first. Here's what worked for me:
#font-face {
font-family: 'Fauna One';
src: url('fonts/faunaone-regular-webfont.eot');
src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
url('fonts/faunaone-regular-webfont.woff') format('woff'),
url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}
(This is 99% the same as the CSS file generated by the Webfont Generator, just rearranged a bit).
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
#font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Another thing: This trick will cause the browser to download two versions of the font but that's a small price to pay for good looking text!
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
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>