Woo commerce star rating edit - css

First off I apologise for any cringe worthy ignorance, I am a novice.
I'm having some trouble changing the product rating stars to an image of my choice on woo commerce.
I understand woocommerce uses a woff file from the fontawesome pack, I found the plugin.css, located the fontface code for the woff file.
I converted an SVG to a ttf and then to woff and replaced the star woff file with that (keeping the same name to avoid changing code)
But the result is a series of S's.
Totally stuck on this for a few days.
I appreciate any insight.
Thank you

You appear to have replaced the entire font with your new font.
A font is a series of designs (glyphs) associated with different character positions. So a W in Times New Roman looks different to an W in Comic Sans.
Dingbat/icon fonts put arbitrary images in place of letters.
Your new image should be where the S is. As it is not, and there is no character at that position in the font file, your browser will be defaulting to a different font (which, as might be expected, has an S allocated to the S position).
You will probably find that other icons around the site look wrong, because you've swapped out the whole .woff file.
You need to use a font editor that will let you set glyphs in the right place.

Related

Turn off font smoothing/antialiasing for font-face?

I try to embed my unusuall font Anonymous Pro to my simple page. The thing is when I define new font-face and use the .ttf file the font looks completely different. When I look closed it seems like the font is now smoehow weirdly smoothed. See:
up - original, bottom - with font face
The reason I'm doing this is I want to be able to see the original version on devices where Anonymous Pro font is not installed.
I looked here and here but looks like be Forefox 96 doesn't know such directives.
My question is whats actually going on and how can I fix it?

Do we need all font-family files to make a font work?

So I have a font pack for example Font-Awesome.
They provide me with different file types like eot, woff, woff2, or svg. Now as per what I've read, We just need a single file for a specific font weight to work.
All I want to ask is, If we just add a single font file where font-weight isn't applicable, like Font-Awesome or Simple Line icons, what are the issues that we end up facing?
WOFF2 has nearly universal support right now, so you don't need to include the rest unless you want to get those last few percentage points of users who are on older browsers.

How can I convert .svg files to a font? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 2 years ago.
Improve this question
How can I convert .svg files into a font? Is there any API or programmable method?
I found two relevant answers here on Stack Overflow:
Creating icon fonts with vector software (i.e. inkscape) and fontforge?
Tools to convert svg to ttf [closed] (archived from this deleted SO question)
Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).
Still, I got what I was looking for by combining those two answers.
Clean up SVG
(This step might be optional.) Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character ("glyph").
Convert SVG to font
Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.
Using IcoMoon
IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click "Get Info" on the set's preferences so you can name the set and give it some metadata. Use the "Edit" tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.
When you're done, select all of the glyphs you want in the font and then press the "Generate Font" button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.
Now press the "Preferences" button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the "Download" at the lower right. You'll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.
Iterate
I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn't even messing with ligatures or kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's fc-cache from Fontconfig)
Validate the font
You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that's only of use for FontForge creations.
There are multiple online tools that allow you to upload SVG files and use those as icons for creating an icon font. Personally, I prefer the Icomoon App.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
As others wrote, it is possible to import svg shapes into fontforge and some font designers work this way.
However, shapes (outlines) are only one part of a modern smart font, so that won't be sufficient in itself. You also need to work on metadata, kerning, hinting, etc. That's a lot of definitely not-fun, hard, but necessary stuff, while would-be font designers usually dream about ego-rewarding artistic drawing and not much else.
That's one reason svg fonts never caught up as a format, they're missing too many parts to be useful to render text.

Converting Vegur to be used for font-face

I need to use Vegur font, which is available in otf format, for a website. However, when I try to convert it using font squirrel or any other similar font-face generator (e.g. http://fontface.codeandmore.com/) font immediately loses all smoothness and quality...
Is anyone aware of where I could get a pre-converted version of the font? Or what else could I use to convert the font.
have you checked this page with html characters rather than the one you've linked to (that has images)?
http://www.fontspace.com/arro/vegur/22551.charmap
My OS is windowsXP (using Chrome at the moment) and XP notoriously renders non default fonts with poor quality and no smoothness. On the page you've linked to, the font looks nice and smooth because is just an image, while when I check the link above, all chars render poorly... what's your OS?

# Character at the beginning of fonts in CSS

When working with Visual Studio, I always see that # character when selecting font family in CSS editor and finally I decided to ask what that is.
Sample image right below :
The Unknown Character http://img341.imageshack.us/img341/5895/cssunknown.png
P.s : It seems like fonts installed only my computer or not general fonts but I am not pretty sure though.
These are fonts that are appropriate for East Asian languages when the text is displayed vertically. The preferred traditional reading direction for Japanese, Chinese and Korean. The glyphs in the font are rotated so that after you create a rotated font, the character displays the right way.
This wikipedia article is excellent, also mentions the #.

Resources