I have a script which converts HTML to PDF. On Windows, it runs just fine.
But when I run the script on Ubuntu, the Arial and Courier fonts do not work correctly.
I presume this is because those fonts don't come with Ubuntu by default. That's fine, it's not a big deal.
I'm just wondering what I should change the following to, such that it will still work on Windows and use a font that is close to Arial and Courier respectively on Ubuntu?
font-family: "Arial";
font-family: courier;
Thanks
For the Arial-esque font use
font-family: Arial, sans-serif;
and for the Courier-esque font use
font-family: Courier, monospace;
These rules basically mean: take the first one if available, otherwise the next one, otherwise repeat until the end. It should work in normal CSS (not sure about your particular implementation, though).
sans-serif and monospace are browser or system dependent values for fonts that have been specified as those font classes (e. g. “DejaVu Sans” and “Ubuntu Mono”).
One way is to use Web Safe fonts. Here's a list of Web Safe fonts you can use:
CSS Web Safe Fonts
Another way can be to use a font from your web directory or fonts available on the web from services like Google Fonts,etc.
Here's its usage:
#font-face {
font-family: fontName;
src: url('/font/xyz.woff');
}
Check here for reference on font face rules.
Check this for getting started with Google Fonts.
Check this page for the Font Stack, showing the compatibility of fonts with different OS.
Related
For my website, I am getting following feedback from Google's PageSpeed Insights: Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading. What does that mean?
CSS font-display allows you to control how web fonts are swapped with system fonts while/after they load. Lighthouse is telling you that you're loading a large amount of font data using #font-face so there will be lag (up to several seconds) where your content is blank while waiting for the fonts to load.
You can change this so that a fallback font (from your local system) loads right away and then gets swapped with your web fonts once they're loaded. (be aware that your fonts may have different sizes and cause things to jump around when they load).
Consider a structure like this:
#font-face {
font-family: "Open Sans Regular";
font-style: normal;
src: url("fonts/OpenSans-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
p {
font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif;
}
font-display:swap; means when the page renders, all paragraph tags will use the FIRST AVAILABLE fallback font until Open Sans Regular has loaded. (In this case Helvetica on a Mac and Arial on Windows).
This gives you initial content on the screen in several milliseconds instead of potentially waiting several seconds for a font to load.
Also Preload web fonts
Use to fetch your font files earlier.
Ensure text remains visible during webfont load
Font Feature is a technique to use advanced text styles and effects as designed by the font developer. A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps.This picture explain much better
You can solve this issue by using #fontface or you can also try different setting of font-display.
I'm using font-family: "Proxima Nova Alt", "Helvetica Neue", Helvetica, Arial, sans-serif; but it looks terrible on mobile comparing to pc browser. How do I get the same looking result for mobile ?
#ingridly is right. I would guess those fonts are appearing on your desktop because they're installed on your desktop's OS. You have two ways to do this:
1) You need to find them in Google Fonts, TypeKit, or other third-party cloud-based font solution. They provide ways to reference them through CSS, HTML, and JS.
2) Distribute the fonts and actually put the font file in a /font directory (can be called whatever...but /font works), and then reference the file using #font-face
They're defaulting to Helvetica or Arial on mobile because they're not installed on that device.
Hope this helps!
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
My website uses a rather obscure font that about half the computers can properly read. The font is "Lucida Console".
On the computers that can't read this font, they get displayed ugly Times New Roman, is there a way to set the font of my website to Lucida Console but on computers that can't read it, view Arial instead? Using CSS.
you can specify multiple fonts:
p {
font-family: "Times New Roman", Times, serif;
}
The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.
So in your case, something like this is what you want:
p {
font-family: "Lucida Console", "Courier New", monospace;
}
Further tips:
Google css font stack for suggested lists of fonts aimed at certain styles of fonts. 'font stack' is the colloquial name for these font lists.
Think cross-platform. Consider adding fonts commonly found on Mac, Linux, iOS, Android, Windows, and other platforms your readers may be using.
Always include a generic-family name at the end of your font stack in case the user has none of your desired fonts:
serif
sans-serif
cursive
fantasy
monospace
Include quotes around fonts named with multiple words, or simply quote all font names.
You can also serve that obscure font with your website (if you are legally able to) using #font-face. It's easy and works even in IE6 :).
Read about it here: http://www.miltonbayer.com/font-face/
I have an asp.net page with an asp.net menu.
I defined the font in the menu items to be Myriad Pro.
In IE and Firefox it appears normally, but in Safari the menu items appear blank.
when I changed the font type to another font it worked fine.
so is there a way to make the Myriad Pro font appear on Safari.
thanks
As Rup mentioned, Myriad Pro is not a ubiquitously defined Mac font. However, if you have a copy of the .otf or .eot font files, you can make the font available to all CSS3 compliant browsers and supply a backup font for display should the browser not support CSS3. This would be the syntax for doing such:
#font-face {
font-family: "CustomMyriadPro";
src: url("path/to/myriadpro/font.otf") format("opentype");
}
h2 {
font-family: "CustomMyriadPro", Helvetica, Georgia;
}
Make sure your CSS specifies Myriad Pro in quotes, i.e.
font-family: "Myriad Pro", sans-serif;
Secondly, be aware that a font will only appear if it's installed on the end user's machine (unless you're using #font-face), so you always need to define some fall-back fonts, e.g.
font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
This problem is happening with multiple installed fonts on my Mac since the upgrade to 5.1 and then to Lion. I think something is broken with the upgrade. Other browsers are fine. It is affecting other fonts as well. I had to disable the font-family CSS in the Inspector in order to get this editor to include readable text because Consolas is affected as well.
The problem is not with fallback or specification in CSS. The problem is with Safari and specific fonts. It does not fallback past the problematic font but continues using it, replacing all characters with the capital A in a square; so fallback is of no help.
Discussion and possible explanation here: https://discussions.apple.com/thread/3191532?start=0&tstart=0
According to the codestyle.org font survey, most Macs don't have Myriad Pro installed. (Nor Windows for that matter.) You should pick similar fallback fonts for all of Mac, Windows and Linux then specify a list of these fonts in your style.
If you specifically need Myriad Pro then you could use images, or embed the font using sIFR (maybe not for menus though) or through #font-face font-embedding (thanks Olly!) instead.
Check out the Typekit webfont-embedding service, they have Myriad in their library http://typekit.com/fonts/myriad-pro