First off, frameworks aren't "great". They are a blight upon the web and a hobble-skirt around the knees of developers. They are -- as my own article says -- a monument to ignorance, incompetence and ineptitude.
They were created by people who don't know enough about HTML -- much less CSS -- to be telling other people how to write websites.
Right there with you on inline styles, BUT... it's not about "clutter" it's about separation of presentation from content. If you choose ANY of your HTML tags or attributes based solely on what you want things to look like, you've failed to divine the purpose of HTML.
Hence your statement about "Not using heading tags for styling" is the OPPOSITE of why numbered headings should be used. They have a MEANING that is separate from their appearance.
An H1 outside of SECTION means the heading that everything on every page of a site is part of. Think if it like how the title of a book is on every fold-pair. SECTION is supposed to reset you to H1 depth, but since UA support for that is nonexistent it's accepted practice to ignore section and maintain the HTML 4 practice of "one H1 per page" as being the proper semantics.
H2 marks the start of a major subsection of the page, with the first H2 indicating the start of the main content unless MAIN is present. H3 marks the start of a subsection of the H2 before it. H4 marks the start of subsection of the H3 before it. Care to guess what H5 and H6 MEAN? Even lowly HR means a change in topic or section where a heading text is unwanted or unwarranted.
THEY DO NOT MEAN FONTS IN DIFFERENT WEIGHTS AND SIZES, OR "DRAW A LINE ACROSS THE SCREEN"
That is just their default appearance. Again, if you choose ANY of your HTML tags and attributes for their appearance, you're using HTML wrong. The same extends to the use of classes which is why idiocy like class="text-center col-4-s col-6-m box-shadow" are ignorant trash; at which point you might as well go back to writing HTML 3.2 with tables for layout and all those CENTER / FONT tags and ALIGN attributes everyone so clearly seems to miss. Recreating the crap that was removed on purpose with classes completely misses the point!
Also your @font-face example is broken, you didn't include font-weight in the second one, so all you did was overwrite "open sans" instead of adding its bold variant. Good rule of thumb? Always state font-weight and font-style, even if it's the default.
Though yes, using the same name so you only have to say “font-weight:bold” when you want the bold one in the same family is how it's supposed to be done. It’s scary how many dev’s don’t seem to know that.