This morning my webpage and whole website looked totally different.
Although I didn't even touched anything. I found other people on the Google product forum who complain about the same thing. But I want a solid solution.
I use a css file from where I import the font
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
This is used on every page.
Now it seems that Google changed the font this night into a, for me, horrible looking font.
Now I found another font, which I want to download and use on my server, so this kind of google jokes never effect me anymore.
But I can't if I can do this and how.
My question is: can I download a font store it on my server and use it in my CSS?
Sure, you just need to define the font in your CSS and where it is located
You can define a font with
#font-face { font-family: 'myfont';
src: url('path/to/yourfont.ttf') format('truetype'); }
and then use it like this (with a Fallback to a default font):
.classname {
font-family: 'myfont', Arial, Helvetica, sans-serif;
}
I found a 'fast' solution for this
The 'thin' version was used here, but was not specified. Google changed the options and you need to specify with specific font version you want. In my case it was
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);
My website looks 'normal' again :)
The Google blog forum discribes some other solution
Google blog
Related
I have the following problem: I'm using the variable font from the family inter (https://rsms.me/inter/) and implemented it the following way:
#font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}
html { font-family: 'Inter var', sans-serif; }
When styling a font, I only want to change the font-weight, therefore I declare it like this:
p { font-variation-settings: 'wght' 200; }
The browser renders the font in the correct family and weight, but unfortunately on page load, the font always "flickers" shortly. It seems to me, that the browser first renders the font in the normal font-weight and then re-renders it with my wanted weight. This issue is happening on all fonts I use with the variable font-variation-settings.
The behaviour happens on every page load, also on reloads. You can have a look at the issue during page-reload here:
Thanks for a hint!
As we have found there are many causes for font flickering.
The solution for the problem that promted this post was found by the post creator:
"I have fixed it somehow: I have asked the creator of the font and this was his answer: "Probably because you are using font-display:swap (it intentionally causes "flicker" for requests to fonts that are not cached in the client, which should be rare.) See developer.mozilla.org/en-US/docs/Web/CSS/#font-face/…" If I change the font-display to block, it does not flicker anymore but there is a longer period of time, where the font doesnt get rendered. I have decided to change the project and work with an standard not variable font. – Mista K."
Loading on a server:
While I am certainly not an expert on this. Loading the file on a server fixes the problem. This is likely due to the style sheet being cached when loaded on a server.
Changing font:
This is not so much a fix, but errors may be caused by the font itself infortunately.
Another quick fix:
Adding a loading screen may be required for a project and thus the font can be loaded within this.
Sorry this is not the most definitive post, this is just what we have found to be solutions over discussing this problem. Feel free to comment on this to add to this or even to tell me I'm wrong.
This seems to be a problem with the font it's self the best solution I can give is to simply use another font. I would recommend using google fonts
HTML:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
CSS:
p {
font-family: 'Open Sans';
}
----------Original Post----------
Why not just simply use p {font-weight: 200;} instead, this might solve the problem and would probaly be easier to read (at least from an external persective)
Also try adding your font-family to body instead of html if this doesn't work
I am trying to embed a font file to my tumblr blog using #font-face and Font Squirrel kit, but so far I had no luck. I also used base64 encoding for embedding the font, but neither in Safari nor Firefox I cannot get it to work.
Edit: Uploading files and using them to tumblr's static area works in Safari and for Latin script. The font I am trying to use includes characters from Old Turkic script, and I cannot get these to work. Any advice regarding the complex scripts would be appreciated.
My code is below:
#font-face {
font-family: 'orkunregular';
src: url('http://static.tumblr.com/gaobkbe/d1rn63eux/orkun-regular-webfont.eot');
}
#font-face {
font-family: 'orkunregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
url('http://static.tumblr.com/gaobkbe/xtgn63ewo/orkun-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/gaobkbe/nZcn63ey6/orkun-regular-webfont.svg#orkunregular') format('svg');
font-weight: normal;
font-style: normal;
}
How to proceed from now on?
Don't try to store and serve the font files on tumblr itself. This is likely not permitted by Tumblr TOS.
Put the font files somewhere else and it will work.
What you have done so far is, you defined the font-family. That will not make the browser use it.
Add this to your current custom css.
section.post {
font-family: "orkunregular";
}
You need to apply that Font to the HTML-Elements you want to use it on.
section.post would be only your own blogposts.
if you want everything to use that font, try:
* {
font-family: "orkunregular" !important;
}
Please check the TOS of Tumblr if they allow that kind of customization, or atleast host those Fonts on a seperate webserver.
Okay, I've solved it. When generating the font kit, I chose the Unicode range of the Old Turkic script, then when used the new kit, it displayed without any problems.
Here's the blog page, http://bitigchi.tumblr.com/indiriler1
Thanks for all the answers.
I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.
Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:
font: 100%/1.6 "Font name here";
color: #bbb;
font-weight: 400; (for example)
Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).
Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!
For reference I am using the following reset:
html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}
Edit: #Fontface code that I've used, that does seem to look the same!
#font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf')
format('truetype');
}
(just picked this font as an example)
I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides.
The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:
For this:
http://fonts.googleapis.com/css?family=Open+Sans
you get this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.
That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.
I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.
This is potentially a duplicate of this question but this was my answer to that:
Fonts render differently based on:
Screen/Monitor resolution
Browser
Operating System
Size of use and hinting
Without seeing your code the only things I can recommend are:
Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).
Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.
Assuring you are using the actual versions of the fonts and not just applying CSS styles.
If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.
Some people also recommend not using the #import or direct link from google. Perhaps try downloading the file and using #font-face in your css.
Hope this helps!
EDIT:
If you’re hosting the font yourself — double check the #font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.
now, i want to use Monotype Corsiva. i add the font in my theme ,then in css file using font-family:Monotype Corsiva ,but some one tips me: font used for site title and headings is not working if it's not installed on users system. You should either remove font file from theme directory or include it in css file in apropriate way.
how to include it in css file in apropriate way? thank you
You need to use #font-face with your font in either .ttf or .eot
Below is an example
#font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
h1 {
font-family: 'RieslingRegular', Arial, sans-serif;
}
For more details, look here http://bavotasan.com/2010/embedding-fonts-web-site-css-font-face/
Monotype Corsiva is a copyrighted font. Check out http://www.fonts.com for conditions and instructions for use. They have a policy that allows a limited number of page views (25,000) for free. The instructions and procedures might be a bit confusing, but in the end you will have a script element generated by them to add to your pages, and then you will just use the font under the name they give you (it seems to be Corsiva W01).
Alternative, try and find a suitably similar free font from Google Web Fonts, for example.
I was wandering how can I link font-family in css to a font in your folder. Like PHP you can use your font in your folder.
Example Code:
CSS:
font-family: verdana;
This is what I mean:
font-family: foldername/font
Is there a code for that? or I have to use PHP to browse my own font?
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
Just found this one on "A List Apart", haven't checked myself but this webbie is one of the most respectful resources for designers online so i guess your best shot is to give it a try.
It is not possible do like:
font-family: foldername/font
Fonts are read by the browser from the client machine from a specific location, you can not change it that way.
Jordan,
This should help you:
Using #font-face
You are misunderstanding this. PHP can use server-side fonts to generate an image. The font itself is never shown to the client, just the rendered results.
To be able to use a non-standard font in the user's browser, you will have to package the font along with the site.
There are various techniques to do this, all with various degrees of browser support. Here's a good article on the various available techniques, their upsides and downsides. Also check out the duplicate link.
Note that only because you paid for a font, this does not mean necessarily that you are allowed to re-distribute it embedded in a web site! Always check your font license.