Im working on a HTML/CSS start page for a linux program I'm running. All my font-families were set to Arial, Verdana, Sans-serif in the css. When opening the page in Chrome or Firefox, the fonts displayed properly. Even running the windows version of the app with the same start page displayed correctly. But for whatever reason, the linux version displays the start page with all fonts replaced with courier. Its a very jarring font and I cant seem to get Linux to not default to it on this program. Ive tried changing the fonts in the css doc to Helvetica, or adding single or double quotes around each font family name, but nothing seems to change this. Does linux have some weird font quirk with css that I don't know about? any info is helpful.
Try using the Google Fonts API to ensure font consistency across platforms.
Find the fonts that you are interested in on Google Fonts, if they are available. Here are the steps for how to import them into your HTML document (internet connection required):
Go to Google Fonts
Use the search bar in the top right corner to find one of your fonts
Press the Plus (+) button next to your font
Repeat steps 2 and 3 for all of the fonts that you need
Click the Families Selected toolbar at the bottom of your screen
Select Embed
Select Standard
Copy the code block (highlighted in grey) and paste it within the <head> tags of your HTML document.
Specify the fonts that you want to use as instructed by the site (under Specify in CSS)
Related
I have the following HTML page:
<style>
body {font-family: BlinkMacSystemFont;}
</style>
text
When viewed in Chrome on OS X 10.11, text is displayed in the system font (supposedly San Francisco with El Capitan and Helvetica Neue with Yosemite). When I save the webpage as a PDF and open it in Preview, I cannot select the text and highlight by clicking and dragging, and instead the entire page is selected as if it is an image. I've checked the PDF properties using Adobe Reader and there are no embedded fonts used. How can I fix this to be able to select individual text? Is there any way around this?
OpenType fonts have a concept of permissable usage. This defines how/if the font can be embedded and used. Some fonts allow the entire font to be embedded and redistributed. Some fonts allow a subset of the glyphcs to be embedded, which is useful when a document only uses a small number of glyphs in a unicode font. Some fonts only allow a rasterized (bitmap) reproduction of the glyph. Some don't allow any embedding. Tools that produce PDFs and the like must follow the rules, or could face legal action from Apple. I certainly wouldn't want to be on the receiveing end of that.
I suspect that the OSX fonts are of the category that only allows rasterized embedding. Your best bet is to find another font that doens't have this restriction.
I am using this great font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro)
I wanted to use this font in a webpage of mine. I've put the .ttf file in a map named 'fonts' and referred to it in CSS.
nav a{
background:#9cf2e6;
display:inline-block;
color:#0;
text-decoration:none;
font-size:15px;
font-family:'Munro';
margin:13px 3%;
padding:7px 2%;
}
Then I noticed something. The O's in my webpage are filled. As you can see it shouldn't do this, because it did not do so in Photoshop or the webpage from Fontsquirrel. Also I tried to modify the font in Glyphs but there seems to be nothing wrong with it there.
My question: how will I undo the filled letters in this font? Is this a problem because it ain't a webfont from Typekit or Google fonts?
Thank you so much for all the help I can get.
I'm unable to reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters display just fine (see image below). And I think that's the bigger issue: fonts not made for the web are likely to be rendered very differently across browsers and platforms (if at all). If you want to make sure these buttons look the same for all your users, stick to the images you created with Photoshop (and perhaps save them as PNG-8 with transparency rather than PNG-24 to shave off some kilobytes).
Technically, you can turn any TTF file into a web font, using FontSquirrel's Webfont Generator, for example. The font's license has to allow this, of course, because you'd essentially be redistributing the font. Just placing the TTF file in a /fonts/ folder and using font-family: Munro;, however, is not going to cut it, and only works for you because you have previously installed the font on your computer.
If I have, say, the Ubuntu font installed on my computer and I visit a webpage that references it in its stylesheet, my browser will not bother downloading it from the webserver, but instead loads it from my hard drive (or memory), which saves bandwidth and is much faster. I've also found that having a font installed locally can actually make it render differently than when it's loaded as a web font (e.g. WOFF).
So yes, it probably is a problem because this particular font is not very web-friendly, but even with web-friendly fonts, like those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it may be a fun exercise to try and recreate the images using just CSS, you're probably better off saving these buttons as images, or using a font that is web-friendly. Something from the Monospace category in Google Fonts, perhaps?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I work on a system who always bug with the google font load, but i can't see when the font is not loaded because I have all these font in local (for Photoshop) so the font look like good on my computer.
So, I would like to disable all these font in chrome so I can see quickly if the google font is correctly load or not.
Do you think it's possible ??
Thank you
PS: Excuse my english, i'm French.
Rather than disabling the fonts on your side of things, why not use the font API in Chrome or Opera and have run through all the fonts that have been specified as follows?
document.fonts.ready.then(function(set) {
// Log that the fonts are loaded
console.log(set);
var t;
for(var t of set.entries()) {
console.log(t);
}
});
The FontFaceSet will tell you if the font has been loaded or not.
On Chrome/Brave you can now see where the font was loaded from. Go to view —> developer –> inspect elements –> make sure the elements tab is selected –> select the computed sub-tab –> scroll to the bottom and look for rendered fonts. If it's a local file it'll say YOUR_FONT – local file.
Bonus:
If using a Mac, then you can disable the local font in the Font Book application. Just open that app, then find the font you want to disable, right click, and select Disable "YOUR_FONT" Family. Then refresh the page and you should see what the user without that font will see.
I have modified the code of someone else who are trying to load three google fonts.
They have 3 css file. Every css file have used one css font from google web fonts. In chrome dev tool I have seen only one fonts work and other 2 not.
it's happen because only one can applied so chrome trying to download one. When they changed the font on dropdown's select change it's not worked because font is even not loaded in chrome.
Because I want to load the font when they changed the dropdown so I write this code:
<div id="hiddenFontLoader"></div>
CSS:
#hiddenFontLoader {
font-family: 'Quicksand', 'Cantarell';
display: none;
}
This code help me to load other 2 fonts that is used nowhere and will be used when dropdown changed.
Now I want to prove that it's working. For me I can just set the font 400% and can check that is working or not.
What is the proper way to test the font is loaded or not. I means if I use fallback fonts then I can't check if all fonts have very small difference and fallback font are very similar to the font I load from Google font.
Suppose I applied to the body{} then how to confirm it's work in chrome dev tool or firebug.
Anybody have trick for it.
You should consider using Google WebFont Loader.
The documentation is very thorough. Specifically, check out the Acting on Events.
https://developers.google.com/webfonts/docs/webfont_loader
I believe you are looking active event (Click Here!).