Watchman: Http://dev.hambonespgh.com/menu

Watchman: Using Firefox 40.0.3 on my laptop, the menu content of that page appears correctly using veteran typewriter font

Watchman: On my android smartphone, however, using firefox 40.0.3 the font is different, not loaded properly.

Watchman: I don’t understand why.

Watchman: Other fonts load properly.

Pam: Watchman, it’s possible that it doesn’t support the font formats you have available? You could check up on that at least as a starter.

Watchman: Pam, How can I check that? This css file is loaded: http://dev.hambonespgh.com/sites/default/files/fonts/veteran%20typewriter.css

Pam: Yes but the CSS file can load even if the browser can’t load the types you offer. You only offer TTF and while I think it might be weird if they didn’t support TTF usually WOFF is also offered.

Pam: Oh. I don’t think it’s loading here in Firefox either, desktop.

Pam: Aha! I think you have a typo or some such in the src line.

Pam: You probably should quote the value of the last url. that specifies the link to the ttf.

Pam: Firebug shows Firefox dropped it.

Pam: Also you may wish to make that a relative path.

Pam: So that if you promote this to prod and/or get https cert that it doesn’t end up wonky.

Watchman: Like src: local’Veteran Typewriter’, local’Veteran-Typewriter’, url’/sites/default/files/fonts/veteran typewriter.ttf’; ?

Pam: That would work but it looks like the stylesheet is in the same folder so “veteran typewriter.ttf” alone would work just fine.

Watchman: Ah, cool, it works now on smartphone

Pam: And finally, not to be too nitpicky, but you might do a contrast check on that black.

Pam: Maybe you hadn’t got there yet.

Pam: It seems a bit dark against the read.

Watchman: Yeah, still working on things

Pam: There’s a nice site I can dig up if you want to check contrast of colors.

Watchman: Pam, like http://paletton.com/ ?

Watchman: Pam, playing around with some text-shadows, what do you think http://dev.hambonespgh.com/menu

Pam: Watchman, http://snook.ca/technical/colour_contrast/colour.html is the one I usually use. It’s very simplistic.

Pam: It just tells you whether or not you p*** and by how much.

Pam: Hmm, I don’t see any text shadows so either they’re very subtle or something didn’t work.

Pam: Watchman, I don’t know that you need it, or at least you could try making it a little less obvious.

Pam: Rgba0,0,0,.3 might be nice but I’m not a designer. :

Watchman: Http://dev.hambonespgh.com/menu – I don’t think it’s possible using CSS3, but if it is, I’d like to learn how — how to make the last nth-of-type to have different css applied if only 1 or 2 etc columns exist in last row, to adjust position to be centered rather than positioned ***uming more elements exist to fill in space to right

Watchman: For example, in Starters section, if 3 or 4 depending on width of screen columns appear, for the last row to be centered skipping the first position

Watchman: I’d rather not hard-code all the columns specifically, but that could work otherwise

Watchman: I suppose that would be the optimal solution, to hard code

Eddins: Watchman: you should consider improving the HTML on that page – the menu items are all made up of semantically meaningless div and span

Eddins: Watchman: might be good to check out the Restaurant schema https://schema.org/Restaurant

Eddins: Watchman: to answer your question, I don’t know how you could achieve that with css columns, but you could achieve it with flexbox

Krysiak: Howdy, this is simple sorry. but I have g id=”Label Layer_layer”text/texttext/text./g and I want to apply a text-shadow to all “text” in this “g” element. any help with what the css path is for this?

Pam: Ahhughes, Presumably #Label Layer_layer text { . }