css - Safari giving precedence to installed font -

some of designers working @ workplace noticed on safari font of our website appeared 1 installed on machine , not 1 serving.

we noticed in 2 different occasions , 2 different fonts: montserrat , open sans.

the first time (with montserrat) user had newer version of font, , saw newest on safari, because had installed on local machine (this wasn't happening on chrome).

the second time (with open sans) saw bolder font on particular machine: discovered on machine user had installed bolder weight (700) 1 serving (600). , rule

font-weight: bold; 

so suppose browser picked boldest (700) installed fonts.

i did research didn't find evidence of this. know if there evidence/documentation on safari giving precedence installed fonts instead of ones serving?

we not using google fonts google's cdn, decided download them , serve them our own server.

edit: i'm adding code use load font (generated using google webfonts helper):

@font-face {   font-family: 'open sans';   font-style: normal;   font-weight: 400;   src: url("font/opensans/open-sans-latin_cyrillic-400.eot");   src: local("open sans"), local("opensans"), url("font/opensans/open-sans-latin_cyrillic-400.eot?#iefix") format("embedded-opentype"), url("font/opensans/open-sans-latin_cyrillic-400.woff2") format("woff2"), url("font/opensans/open-sans-latin_cyrillic-400.woff") format("woff"), url("font/opensans/open-sans-latin_cyrillic-400.ttf") format("truetype"), url("font/opensans/open-sans-latin_cyrillic-400.svg#opensans") format("svg");  } @font-face {   font-family: 'open sans';   font-style: normal;   font-weight: 600;   src: url("font/opensans/open-sans-latin_cyrillic-600.eot");   src: local("open sans semibold"), local("opensans-semibold"), url("font/opensans/open-sans-latin_cyrillic-600.eot?#iefix") format("embedded-opentype"), url("font/opensans/open-sans-latin_cyrillic-600.woff2") format("woff2"), url("font/opensans/open-sans-latin_cyrillic-600.woff") format("woff"), url("font/opensans/open-sans-latin_cyrillic-600.ttf") format("truetype"), url("font/opensans/open-sans-latin_cyrillic-600.svg#opensans") format("svg");  }  @font-face {   font-family: 'montserrat';   font-style: normal;   font-weight: 400;   src: url("font/montserrat/montserrat-latin-regular.eot");   src: local("montserrat-regular"), url("font/montserrat/montserrat-latin-regular.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-regular.woff2") format("woff2"), url("font/montserrat/montserrat-latin-regular.woff") format("woff"), url("font/montserrat/montserrat-latin-regular.ttf") format("truetype"), url("font/montserrat/montserrat-latin-regular.svg#montserrat") format("svg");  } @font-face {   font-family: 'montserrat';   font-style: normal;   font-weight: 700;   src: url("font/montserrat/montserrat-latin-700.eot");   src: local("montserrat-bold"), url("font/montserrat/montserrat-latin-700.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-700.woff2") format("woff2"), url("font/montserrat/montserrat-latin-700.woff") format("woff"), url("font/montserrat/montserrat-latin-700.ttf") format("truetype"), url("font/montserrat/montserrat-latin-700.svg#montserrat") format("svg");  } 

and relevant code give different font-face different parts of pages.

body{     font-family: "open sans", helvetica, arial, sans-serif;     font-size: 14px; }  h6, h5, h4, h3, h2, h1{     font-family: inherit; // inheriting body     font-weight: bold; }  .view{     font-family: 'montserrat', sans-serif; } 

based on code show solution kind of obvious: if don't want local fonts interfere, don't tell browser try local() first. or @ all, really.

it's 2017, , in today's browser landscape only want src: url(woff font version) format("woff"), nothing else: no other formats, no local-first, explicitly font content should use. in current browser landscape eot , svg don't exist valid formats anymore, , woff are ttf/otf, compression, , marked explicitly intended "for web" required data can left off, yielding smaller font payload. only other format might add woff2, uses newer compression algorithm , allows "slicing" single font several subsets browser loads slices needs style content instead of entire font in 1 go.

whatever generated css appears still stuck in "how webfonts worked in 2012".