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.
Related
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)
I am using a Google font "Kameron". I downloaded it from fonts.google.com
It displays special characters such as "š" correctly in Photoshop, and also in a .PDF file viewed in browser. So, the font obviously supports these characters and the browser is able to render them.
However, when used in a HTML Web Page and viewed in browser (Firefox, Chrome, Edge) it doesn't display the special character, instead it replaces the character with a default 'serif' font.
I am running the website locally.
I've included the font using Google's standard <link> embed.
I've also tried downloading it, converting it to a web font, hosting it locally and importing it using #font-face in CSS, but that didn't help.
I've tried searching but couldn't find anything relevant to this specific situation. I'm sorry if the answer is obvious or something but I'm not seeing it. Can you help?
h2, p { font-family: 'Kameron', serif;}
<link href="https://fonts.googleapis.com/css?family=Kameron:400,700|Open+Sans:400,600" rel="stylesheet">
<h2>Tešting</h2>
Since the TTF file doesn't contain a š glyph, you can use the NFD form, the combined glyphs s and ̌, or, š.
My guess is that's how Photoshop does it.
To see the differences between the NFC and NFD forms, see here:
div {font:72px 'Kameron';}
<link href="https://fonts.googleapis.com/css?family=Kameron:400,700|Open+Sans:400,600" rel="stylesheet">
<div>NFC: smješten</div>
<div>NFD: smješten</div>
Disclaimer: doesn't work as well as could be hoped in all browsers. This is what I was going for:
I have a case where I've got an old web page with some ancient languages with some older fonts that are being used and the fonts don't appear to be embedded properly and I'd like to render the page such that it shows the proper fonts that it is requesting.
In this case, I have the following example of code in the html:
<span style="font-size:24.0pt;mso-bidi-font-size:10.0pt;
font-family:Phoinike;color:blue">EXAMPLE<o:p></o:p></span>
I also currently have the font phoinike.ttf active and showing in macOS Font Book as Phoinike Regular:
I have some other languages that have the seeming exact same scenario and I have inserted the fonts and they are rendering perfectly (for example, some Egyptian Hieroglyphics, etc.), yet no matter what I do here, this particular font in both Chrome, Safari and Firefox are not rendering.
Any ideas on what one can do to help the browser / HTML renderer to understand that it can use certain fonts when all appearances are seeming to lead to the font being active? I'm having to believe that somehow the names are different in some way that the renderer uses to properly detect the font, but I'm drawing a blank...
Relating the mechanism which permit a browser to display correctly a text formatted wiht a certain Font-Family, it should be described in this way:
the font-family property lets designers specify a prioritized list of fonts for the browser to use to display content. If the preferred font is not installed on the user's computer, the browser will attempt to use the second font in the list. If the user does not have of the preferred fonts installed, a default font is used to display the content.
In Windows 7 the set of fonts installed on the user's computer font should be viewed in Control Panel > Appearance and Personalization > Fonts.
Now in my installed fonts "Open sans" is not listed, and yet my IE11 are able to correctly reproduce a text formatted in "Open sans".
Where is the repository where IE11 get the "Open sans" font?
Thank you very much
Because of #font-face:
The #font-face rule allows for linking to fonts that are
automatically fetched and activated when needed. This allows authors
to select a font that closely matches the design goals for a given
page rather than limiting the font choice to a set of fonts available
on a given platform.
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.