How to change 'inherited' font families using the CSS style sheet - css

I am not a programmer. The language is foreign. I am creating a WordPress website. I created a child-theme.
I read the theme documentation. Understood very little.
sent an email to the theme owner. No answer (2 weeks ago)
searched the web - found many websites - i.e. http://www.w3schools.com/ - http://css-tricks.com/sans-serif/ & others - me, no speak the language. Can you place html code in a CSS file?
The child-theme consists of a new style.css file. The top section of the style.css file is what was needed to create the child-theme. Then there are color changes which I inserted & that has gone very well.
Changing the font family is confusing. Poking around the parent theme and also using 'Firebug' the font(s) seem(s) to be ('inherited'?). .genericon, 'Roboto Condensed', Sans-serif, Arimo, Arial and a few other standard MS Word fonts. I saw on the Google font site a couple of fonts I would prefer to use for my website.
How do I (or even can I) download the Google fonts to the Style.css file?
What do I need to insert in the child style.css file to override the parent fonts?
In case this is important, the theme has more than one template (PHP?) option. I am using W7 OS.

The Google Fonts site is really direct and helpful.
In your example, you mention Roboto. Here's the page for that font.
You would check the varieties of Roboto that you want to be able to use on your site under Step 1.
Step 2 allows you to select additional character sets -- for example if you were likely to be displaying text in Russian.
Step 3 gives you three ways to "enable" the font on your site. You'll be placing a line of code somewhere, telling users' browsers to go and get the font from Google when called for. The easiest way to do this is probably the #import option. Copy and paste the code under that tab into your style.css at the top (that's important -- it should go before any of the stuff describing the layout or type on your stylesheet). Your sub-theme likely has a bunch of other #import lines up there already.
Step 4 shows what specifically you need to tell your stylesheet to look for.
Good luck!

External style sheets have the highest hierarchy, so just specify your styles with the id, class or element name.
Google is your friend here.
To use google fonts, go to the google font page and search for your font with the search box on the left, then click add to collection. Once in your collection, go to your collection and click "use".
You should get an "#import()" code, place this at the top of your external sheet.

Related

Drupal 9: Which CSS stylesheets control the contents of articles and the front page?

I want to tweak the fonts of the Drupal default theme ›Bartik‹, namely I need to have sans-serif headings in articles (and preferrably on the front page).
The theme does recognise headings, as they are larger than body text, but I don't find the CSS-stylesheet ruling the articles' fonts.
The page source yields some 100 CSS stylesheets, which either have nothing to with fonts according to their filename or don't have any effect on the fonts, although they seem to.
Diving into the directory tree brinds up about 760 CSS stylesheets – and I'm completely lost.
I do not want to create a subtheme (at least not now), as I would end up with the same problem: Not to know, which CSS I would have to tweak or apply.
Any hint would be highly appreciated!
<drupalroot>/core/themes/<theme>/css/base/elements.css
eventually worked for me – after I realised that an active cache would prevent delivery of edited settings and thus making me believe, changes would yield no effect.

Multi language support in Downloaded mbtiles

I've downloaded mbtiles from openmaptiles and Also displayed them in web page. I used this to translate labels from english to other languages. but it doesn't work. Does anybody know how to change languages?
(Should mention that i display it with mapbox gl)
In a similar situation, the styles I got from running the docker setup of tileserver-gl contained many layers such as: "poi_label-en". These label are preventing the new label created by klokantech/openmaptiles-language to display properly (the library will create layers such as "poi_label-de" based on the definition of "poi_label" for German for instance).
I'd suggest the following steps to make openmaptiles-language works properly:
Take the latest style you want, such as: https://github.com/openmaptiles/klokantech-basic-gl-style
Update the style to point to your source, glyphs and sprites. (use your current style as a basis)
Potentially change the name of the fonts if they do not match the ones served by your server (I had to update from "Noto Sans Regular" to "Klokantech Noto Sans Regular")
Then if you follow klokantech/openmaptiles-language instructions and example it should work properly.
A quick way to check your javascript implementation would be to use the cloud solution of openmaptiles for the tiles and the style. If it works properly, the javascript part is OK and the problem is in how your style is defined.

Using a Custom font on weebly blog

I'm trying to use a custom font on my blog which is I haven't make it work yet. Maybe you guys can help me out on this.
I just want my blog title to have its own font. here's the HTML structure
http://prntscr.com/curez2
First thing I did was I uploaded my ttf font in my asset folder
http://prntscr.com/cura4a
Next, import the font in CSS "main_style.css"
http://prntscr.com/curfro
here's the class on my blog-title
http://prntscr.com/curgr8
did I miss something? can someone help me out please. thanks!!
You need to include the full path to the .ttf file on http://prnt.sc/curfro
It looks like you have everything right, however not seeing a live example makes it a little hard to isolate. But there are a few things to consider. For example:
Did you try publishing the site?
Are you ONLY trying the Blog Title?
IF you have set your Font Settings for the Title and Blog Post
Title, to a specific font, it's going to override the Theme's design
and your custom Font. In that case edit the Font Settings and choose
"Default". Then try to see if it works(dont forget to publish). See: https://hc.weebly.com/hc/en-us/articles/201505666-Edit-Fonts
Is the 'Content Area' a div with an ID of content <div id="content"></div> (IF not that could be the issue.) Note: #content h2.blog-title could also be written as .blog-post .blog-header h2.blog-title
Have you tried a different font file(try a different font type/file)
With that, you should at least be able to isolate the issue, if not resolve it.

How to provide an icon for a dexterity type with Plone 5

icon_expr is gone.
There is an related issue https://github.com/plone/Products.CMFPlone/issues/1236
concerning the problem but only for control-panel icons.
What is the appropriate way to add a icon to a dexterity content type in plone 5?
Any pointer welcome
Volker
Unluckily the Plone 5 way is only through CSS (with a background image for example) and register it in the new resource registry.
One way I tested is to re-use Fontello, like Barceloneta is doing but is not really simple because you must manually modify the generated CSS to prevent you new CSS to destroy other global rules.
An example is here: https://github.com/RedTurtle/TurtledGazette/tree/master/Products/PloneGazette/browser/static (it's not even Dexterity or Archetypes, but this is not important).
Note. I don't really understand this run to CSS and iconfont. It's a kind of over-optimization:
old school images can still be cached
background images are not really accessible as real images provided also an "alt" for blind people, that warn about the content type.
I don't like current situation too much... it's OK while you are developing a theme but is a nightmare for add-ons developers.
Beneath the update of an actual fontello font, you can limit yourself to enhance the icon configuration.
From the Products.CMFPlone package you can get the current icon font config file "config.json"
/Products/CMFPlone/static/fonts/config.json
To review the content of the file visually, go to the fontello.com website and visit the menu under the "wrench" icon.
Reset all icon selections and settings you may have done before.
Unselect glyphs
Reset all changes
Use Import to load the config.json file from CMFPlone.
Review the icons, names, codes and shapes
Look at the source code of config.json and locate icons not referencing a font but containing plain svg path information.
You will figure out that even glyphs can contain multiple path elements and holes as well.
Try to overload just the config.json file in your package by appending your custom icon as plain svg in the json and choose a non conflicting unicode char code. I am still working on documenting this in detail.
Source: I found a hint to this by Victor Fernandez de Alba mentioning this method in his talk [2] (see transscript [1]) during Plone Conf Bucharest:
http://maurits.vanrees.org/weblog/archive/2015/10/victor-fernandez-de-alba-plone-5-theming
http://www.slideshare.net/sneridagh/plone-5-theming-53980481 Slide 12

Migrating Typekit account for website - Need to change font-family entries?

My question: Is there a way I can configure my Typekit account so that the font names match with the initial account?
The explanation:
I am in the process of migrating a site from one typekit account to another.
The issue I am having is that the first account has all its font names ending with -1, so that the css of the website currently has font-family entries like this:
font-family: 'museo-sans-1';
font-family: 'superclarendon-1';
Since I do not own this typekit account (hence the reason for the switch), I can't go in an see why the font names are defined as such.
On my typekit account, if I want to use the same fonts, I would need to change the font-family entries to this:
font-family: 'museo-sans';
font-family: 'superclarendon';
Does anyone know why it's behaving this way (the -1)?
I tried checking the box that says “Include variation-specific font-family names” but it doesn’t seem to work, as the font names all end with –LETTER 1 (for example: museo-sans-n1)
Just got an answer back from Typekit's support personel. I think sharing it here will help the internet (hopefully)!
This is a copy/paste from the e-mail I got from them:
The font family names that end in -1/-2 is an old convention that
Typekit no longer uses. It is still in place on kits that were created
during that time, because we didn't want to force users to edit their
CSS.
Since you have created a new kit, you will have to update the site CSS
to use the newer font family name, e.g. "museo-sans".

Resources