This SVG logo looks correct on a desktop browser like Chrome on a Mac:
The correctly displayed logo on desktop has the word "Hosting" in a sans-serif font.
However on an iPhone 5 & 7, the word "Hosting" is in a serif font:
What do I need to do to display the logo on mobile the same as on desktop please, so that the word "Hosting" is sans-serif?
Edit: the word "hosting" is not produced by paths like the rest of the logo, it is a <text transform="matrix(1 0 0 1 96.9229 18.4597)" class="st2 st3 st4">hosting</text>.
How do I ensure the word hosting is produced by paths in Illustrator?
I saw in the .ai file the text had not been converted to paths.
Type > Create Outlines > Export to SVG removed all text from the SVG.
I would recommend using <text> over paths as you would be able to change the text that's inside of it and also i think it decompresses the file size (not sure about this).
You can add style to text so that it can be of any font that you have. Simply apply font-family:Sans Serif; to your <text> element, class attribute or id attribute.
Related
I decided to write the name of this plugin of mine as vim↪softwrap rather than vim-softwrap, but, to my surprise, GitHub shows the ↪ as an icon:
What can I do to avoid that?
I'm not sure whether it's GitHub that is doing it or it's the Markdown specification to require it.
It looks like it's using these fonts (the css selector being the <g-emoji> tag that it inserts around emoji unicode):
g-emoji {
font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
If you save this as an html file an open it, you will see the same thing:
<p style='font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'>↪</p>
I'm now building a listview to display fonts from the UIFonts framework. However, for using UIPasteboard.general.string, the fonts are not copied to the clipboard and only the plain text is transferred.
I've tried including the MobileCoreServices framework and use kUTTypeRTF to implement it. But there is no detailed documentation on it.
May I know how can I build a custom font list and allowing the text be selected and pasted with its font styling onto the other applications (like Notes or Facebook post), just like the font generator hosted online?
I'm now working on the two following UIFonts, but I'm not able to keep its formatting while pasting from the clipboard.
let fonts: [String] = ["BodoniSvtyTwoOSITCTT-Book", "ChalkboardSE-Regular"]
You cannot copy-paste text with a font on your iPhone.
FancyLetters also cannot do this. It just shows you characters that look like they are printed.
For example, the letter "A" has variations: "𝓐", "𝒜", "𝔸". But this is not font-altered text, StackOverflow does not allow it either. These are characters from Unicode table. They are the same characters as "A" or "B", except that without special modifiers the keyboard will not print them for you, e.g. SHIFTOPTIONK = .
Any font is superimposed over Unicode characters.
I recommend you to read an excellent article Emoji under the hood. It's about how emoji are drawn on devices, but it also explains a lot about the construction of characters and how they are rendered on different devices.
Or font generator also cannot do this. It just shows you characters that look like they are printed
This one is quite specify: specify ttf font rendering font-weight:bold incorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:
(this is Reenie+Beanie from google fonts)
http://jsbin.com/ojeqe3/16/
Screen capture
You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in
My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is not OK)
Update:
This one is not fixed in iOS5.
The best solution I know for the problem will be
Use font-weight:normal (as shown in demo)
Use either -webkit-text-stroke or text-shadow to make it look "bold" (plus iPad only css - body prefix added by js, not only media query)
Had the same issue with an h1 inheriting the font-weight: bold; from a parent class. Just overwrite the inherited style with a font-weight: normal;
It seems that Mobile Safari has a buggy way of rendering faux styles with font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.
In your case the Reenie Beanie does not include a bold style, and if you're using them as heading without changing the font-weight to normal or 400 it will render the bold weight "faux styled".
Please do note that using faux styles is generally buggy in some browsers and not only in Mobile Safari.
Solution 1. Use the appropriate font-weight
So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:
h1, h2, h3, h4, h5, strong, b {
font-weight: 400;
}
/* or font-weight: normal */
Solution 2. Use a font that does provide the bold/italic style that you want
The other solution is to pick a font from a web font archive that does include a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.
Solution 3. Fake the faux using other means
If you really insist on wanting a faux bold style you can try using a thin text-shadow or text stroke.
don't use the 'bolder' or 'bold' tag. they aren't necessary if you are using a specific weighted webfont.
I had the same problem. It went away when I removed any mention of font-weight.
Try applying this css rule:
-webkit-font-smoothing: antialiased;
I have two questions
Can this code be added to blogger?
Can this code embed unicode fonts? and if can, please tell me the link how to do it.
I can't see your code Kotaro ,
but any code can added to blogger and and by default embedding font in web is not available . but you can use CSS 3.0 to force user to use from the font you like, this css property is
font-url
and you can use it as any other css property like
<div style="direction:ltr;text-align:left;font-size:small;font-url:('../resources/fonts/YourFont.ttf');"> you code </div>
just note that this CSS property just available at css 3.0 and now just Firefox 3.5 supports it so I recommand you Ignore it for now,
if you want to show a speciall text just use from a font that you know your users have it, like (Arial , Tahoma , Verdana ) for windows usres
for code you can use these software
1- copysourceashtml
http://copysourceashtml.codeplex.com/
that is a opensource software
copysourceashtml http://i3.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=copysourceashtml&DownloadId=78099
2- Postable
http://vahid.nasiri.googlepages.com/postable.rar
I am having the "Futura.ttf" font file.
I am displaying a HTML page in the UIWebView, but my requirement is that i want to use the custom font in my css file.
so is there any way that i can use the custom font in my css file ???
All suggestions are welcomed.
Thanks.
It is possible to load custom fonts into your UIWebView in iOS3.2 and above. Add the font to your bundle (see here) then just reference the font in your UIWebView's stylesheet like you would any other font:
<style type='text/css'>font { font-family: DroidSerif; } </style>
You have Cufon and sIFR as your options.
Typeface.js is a pure JavaScript Replacement
Cufon is a pure JavaScript Replacement
sIFR is Flash and Java font implementation,
FLIR JavaScript and PHP implementation
Some Comparisons
http://thatguynamedandy.com/blog/text-replacement-comparison
http://thinkclay.com/technology/cufon-sifr-flir
http://aaronwinborn.com/blogs/aaron/cufón-alternative-sifr-image-replacement
Below is taken from this question Worth reading the whole thread, has greatdetails.
Typeface.js
Advantages:
User doesn’t have to have Flash
plugin installed on their browser
Easier to create with just a few
lines of Javascript
For page loading it just needs to
load the Javascript
Disadvantages:
Text is not selectable because it
outputs it like an image. I looked at
some examples, right clicked on a
word and had to view as an image.
Every single word had this behaviour.
Big thumbs down.
Usage for body copy will slow down
loading time, so it is recommended to
use only for headlines.
Cannot be read by screen readers
Visual looks blurry
Not all browser compliant and still
has a lot of development left to be
done
sIFR
Advantages:
Can be read by screen readers as a
normal headline because it is a
behaviour layer on top of the markup
and styling.
Text is selectable
SEO friendly
Displays text as is like any other
web font. Crisp and not blurry!
Has addons like jQuery sIFR Plugin!
Disadvantages:
Requires Javascript to be enabled
Flash plugin must be installed in the
browser
Need Adobe Flash Studio to create it
BUT there is a pretty nifty sIFR
generator that creates the file for
you!
For page loading, it has to request
for Flash, Javascript and CSS files
attached to it, which can potentially
get bogged down if you are using sIFR
in too many places.
Cannot display on an iPhone. Yet…
Cufón (similar to Typeface.js)
Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there - no Flash or images required.
There are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site's users.
Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today.
The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily "stolen" and either used on another website or reverse engineered.